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

2018-10-22 20 QUQUQ

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

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

即可在pages文件夹下生成一个名为page4的新页面。还可以通过自定义shell脚本的内容写入路由等,以实现定制需求。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

展开阅读全文

更多Javascript文章

JavaScript 全角转半角部分
Oct 28 26
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 25
防止jQuery ajax Load使用缓存的方法小结
Feb 22 21
js实现文字选中分享功能
Jan 25 19
webpack配置之后端渲染详解
Oct 26 23
vue移动端实现红包雨效果
Jun 23 29
Jquery实现获取子元素的方法分析
Aug 24 26
手机访问当前页面