vue多页面 项目架构整理

前端ui

• iView 官网
  一套基于 Vue.js 的高质量 UI 组件库
• elementUi

管理系统框架

• iview-admin github

移动端ui

• VUX 官网
  VUX 必须配合 vux-loader 使用，如果不使用 vux2 模板请按照文档正确配置。
  less@3.x 有严重的兼容问题，请暂时使用 less@^2.7.3。
  暂未适配 vue-cli@3.x，请知悉。

vue2.0 多页面系统

 // 项目结构
.
|-- README.md
|-- build
|   |-- build-test.js
|   |-- build.js
|   |-- check-versions.js
|   |-- dev-client.js
|   |-- dev-server.js
|   |-- utils.js
|   |-- vue-loader.conf.js
|   |-- webpack.base.conf.js
|   |-- webpack.dev.conf.js
|   |-- webpack.prod.conf.js
|   `-- webpack.test.conf.js
|-- config
|   |-- dev.env.js
|   |-- index.js
|   |-- prod.env.js
|   `-- test.env.js
|-- favicon.ico
|-- index.html
|-- package-lock.json
|-- package.json
|-- src
|   |-- assets
|   |-- components
|   |-- frame
|   |-- service
|   |-- views
|   `-- vuexStore
|-- static
|   |-- desktop.ini
|   |-- test
|   `-- utf8-jsp
|-- test
|   |-- e2e
|   `-- unit
|-- yarn.lock
`-- yarn.lock.bak

对比多页应用和单页应用（SPA）,最大的不同点，就在于入口的不同

• 多页：最终打包生成多个入口（ html 页面），一般每个入口文件除了要引入公共的静态文件（ js/css ）还要另外引入页面特有的静态资源
• 单页：只有一个入口( index.html )，页面中需要引入打包后的所有静态文件，所有的页面内容全由 JavaScript 控制

webpack

• 指定打包模式，可选的值有：

  1. development，开发模式

     • 会将 process.env.NODE_ENV 设置成 development
     • 启用 NamedChunksPlugin、NamedModulesPlugin 插件

  2. production，生产模式

     • 会将 process.env.NODE_ENV 设置成 production
     • 会启用最大化的优化（模块的压缩、串联等）
  3. none，这种模式不会进行优化处理

• 在这里配置的 entry 其实是需要被 html 引入的js模块，这些js模块、连同抽离的公共js模块最终还需要利用 html-webpack-plugin 这个插件组合到html文件中：

// \build\webpack.base.conf.js
// 目的是获取单页面的main.js

var entries = utils.getMultiEntry('./src/views/**/**/*.js'); // 获得入口js文件

entries['preJs'] = './src/assets/js/pre.js'                 //为index.html引入preJs.js
entries = Object.assign({'babel-polyfill':'babel-polyfill'},entries)

var webpackConfig = {
  entry: entries
}

// \build\webpack.dev.conf.js
// 需要在module.exports里使用'html-webpack-plugin'配置plugins

var pages = utils.getMultiEntry('./src/views/**/**/*.html');

for (let pathname in pages) {
  // 配置生成的html文件，定义路径等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路径
    chunks: ['preJs',pathname, 'vendors', 'manifest'], // 每个html引用的js模块
    chunksSortMode: function (chunk1, chunk2) {
      var order = ['preJs','vendors', pathname, 'manifest'];
      var order1 = order.indexOf(chunk1.names[0]);
      var order2 = order.indexOf(chunk2.names[0]);
      return order1 - order2;  
    },
    inject: true // js插入位置
  };
  // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

chunks的作用是每次编译、运行时每一个入口都会对应一个entry，如果没写则引入所有页面的资源

• 之后就对run build也就是编译环境进行配置。打开configindex.js文件，在build里加入页面对应的路径
• 打开/build/webpack.prod/conf.js文件，在plugins中添加HTMLWebpackPlugin

//构建生成多页面的HtmlWebpackPlugin配置，主要是循环生成
var pages =  utils.getMultiEntry('./src/views/**/**/*.html');
for (let pathname in pages) {
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路径
    chunks: ['preJs','vendor',pathname], // 每个html引用的js模块
    chunksSortMode: function (chunk1, chunk2) {
      var order = ['preJs','vendor',pathname];
      var order1 = order.indexOf(chunk1.names[0]);
      var order2 = order.indexOf(chunk2.names[0]);
      return order1 - order2;  
    },
    inject: true,              // js插入位置
      hash:true
  };

  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

其中filename引用的是configindex.js里的build，每个页面都要配置一个chunks，不然会加载所有页面的资源。

---

参考链接

vue2.0之多页面的开发
基于 webpack4 搭建 vue2、vuex 多页应用框架 - 掘金
vue多页面开发和打包的正确姿势 - 掘金