如何在vue中配置一个多页面应用

本篇文章给大家分享的是有关如何在vue中配置一个多页面应用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

1. 新建 vue 项目

vue init webpack vue_multiple_test cd vue_multiple_test npm 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/pages for file in $(ls) do  if [ $file == $1 ];then    echo $1' 文件已存在, 请使用其他名字'    exit  fi done mkdir $1 cd $1 # 生成 index.html echo "" > index.html echo '<!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.vue echo "" > App.vue echo '<template>  <div id="app">  </div> </template> <script> export default {  name: "App" } </script> <style> #app {} </style>' > App.vue # 生成 index.js echo "" > index.js echo "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

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

bash generatePage.sh page4

以上就是如何在vue中配置一个多页面应用，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。