vue 配置多页面应用的示例代码

2019-11-19 12:39:24

字体：大中小

来源：转载

供稿：网友

前言: 本文基于vue 2.5.2, webpack 3.6.0（配置多页面原理类似，实现方法各有千秋，可根据需要进行定制化）

vue 是单页面应用。但是在做大型项目时，单页面往往无法满足我们的需求，因此需要配置多页面应用。

1. 新建 vue 项目

vue init webpack vue_multiple_testcd vue_multiple_testnpm install

2. 安装 glob

npm i glob --save-dev

glob 模块用于查找符合要求的文件

3. 目标结构目录

.├── README.md├── build│  ├── build.js│  ├── check-versions.js│  ├── logo.png│  ├── utils.js│  ├── vue-loader.conf.js│  ├── webpack.base.conf.js│  ├── webpack.dev.conf.js│  └── webpack.prod.conf.js├── config│  ├── dev.env.js│  ├── index.js│  └── prod.env.js├── generatePage.sh├── index.html├── package-lock.json├── package.json├── src│  ├── assets│  │  └── logo.png│  └── pages│    ├── page1│    │  ├── App.vue│    │  ├── index.html│    │  └── index.js│    └── page2│      ├── App.vue│      ├── index.html│      └── index.js└── static

其中，pages文件夹用于放置页面。 page1 和 page2用于分别放置不同页面，且默认均包含三个文档: App.vue, index.html, index.js, 这样在多人协作时，可以更为清晰地明确每个文件的含义。除此之外，此文件也可配置路由。

4. utils 增加下述代码:

const glob = require('glob')const PAGE_PATH = path.resolve(__dirname, '../src/pages')const HtmlWebpackPlugin = require('html-webpack-plugin')

其中：PAGE_PATH 为所有页面所在的文件夹路径，指向 pages文件夹。

exports.entries = function () {  /*用于匹配 pages 下一级文件夹中的 index.js 文件 */  var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')  var map = {}  entryFiles.forEach((filePath) => {    /* 下述两句代码用于取出 pages 下一级文件夹的名称 */    var entryPath = path.dirname(filePath)    var filename = entryPath.substring(entryPath.lastIndexOf('//') + 1)    /* 生成对应的键值对 */    map[filename] = filePath  })  return map}

该方法用于生成多页面的入口对象，例如本例，获得的入口对象如下：

{   page1: '/Users/work/learn/vue/vue_multiple_test/src/pages/page1/index.js',  page2: '/Users/work/learn/vue/vue_multiple_test/src/pages/page2/index.js', }

其中：key 为当前页面的文件夹名称，

```value``` 为当前页面的入口文件名称

exports.htmlPlugin = function () {  let entryHtml = glob.sync(PAGE_PATH + '/*/index.html')  let arr = []  entryHtml.forEach((filePath) => {    var entryPath = path.dirname(filePath)    var filename = entryPath.substring(entryPath.lastIndexOf('//') + 1)    let conf = {      template: filePath,      filename: filename + `/index.html`,      chunks: ['manifest', 'vendor', filename],      inject: true    }    if (process.env.NODE_ENV === 'production') {      let productionConfig = {        minify: {         removeComments: true,     // 移除注释         collapseWhitespace: true,   // 删除空白符和换行符         removeAttributeQuotes: true  // 移除属性引号         },        chunksSortMode: 'dependency'  // 对引入的chunk模块进行排序      }      conf = {...conf, ...productionConfig} //合并基础配置和生产环境专属配置    }    arr.push(new HtmlWebpackPlugin(conf))  })  return arr}

4. webpack.base.conf.js修改入口如下：

```entry: utils.entries()```

5. webpack.dev.conf.js 删除下述代码

new HtmlWebpackPlugin({  filename: 'index.html',  template: 'index.html',  inject: true})

6. webpack.prod.conf.js 删除下述代码

new HtmlWebpackPlugin({  filename: config.build.index,  template: 'index.html',  inject: true,  minify: {    removeComments: true,    collapseWhitespace: true,    removeAttributeQuotes: true  },  chunksSortMode: 'dependency'})

7. 构建结果

【dev】开发环境下，执行 npm run dev 访问: http://localhost:8080/page1/index.html http://localhost:8080/page2/index.html 即为访问不同的页面【production】生产环境下，执行 npm run build, 生成的文件目录如下所示:│  ├── dist│  ├── page1│  │  └── index.html│  ├── page2│  │  └── index.html│  └── static│    ├── css│    │  ├── page1.86a4513a3e04c0dcb73e6d6aea4580e4.css│    │  ├── page1.86a4513a3e04c0dcb73e6d6aea4580e4.css.map│    │  ├── page2.86a4513a3e04c0dcb73e6d6aea4580e4.css│    │  └── page2.86a4513a3e04c0dcb73e6d6aea4580e4.css.map│    └── js│      ├── manifest.0c1cd46d93b12dcd0191.js│      ├── manifest.0c1cd46d93b12dcd0191.js.map│      ├── page1.e2997955f3b0f2090b7a.js│      ├── page1.e2997955f3b0f2090b7a.js.map│      ├── page2.4d41f3b684a56847f057.js│      ├── page2.4d41f3b684a56847f057.js.map│      ├── vendor.bb335a033c3b9e5d296a.js│      └── vendor.bb335a033c3b9e5d296a.js.map

8.【懒人福利】使用shell脚本自动构建基础页面

在项目文件下新建shell脚本generatePage.sh, 并在脚本中写入下述代码：

#!/bin/bash# 打开 pages 文件夹，并创建文件cd src/pagesfor file in $(ls)do if [ $file == $1 ];then   echo $1' 文件已存在, 请使用其他名字'   exit fidonemkdir $1cd $1# 生成 index.htmlecho "" > index.htmlecho '<!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width,initial-scale=1.0">  <title></title> </head> <body>  <div id="app"></div>  <!-- built files will be auto injected --> </body></html>' > index.html# 生成 App.vueecho "" > App.vueecho '<template> <div id="app"> </div></template><script>export default { name: "App"}</script><style>#app {}</style>' > App.vue# 生成 index.jsecho "" > index.jsecho "import Vue from 'vue'import App from './App'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', components: { App }, template: '<App/>'})" > index.js

之后在项目路径下输入下述命令: