背景
实际工作中，存在不同业务之间的H5跳转，由于跳转的h5的场景比较多，于是想利用vue来构建多个项目应用。
下面我就来说说怎么开发多页面的Vue应用，以及在这个过程会遇到的问题。
准备工作
在本地用vue-cli新建一个项目，这个步骤vue的官网上有，我就不再说了。
这里有一个地方需要改一下，在执行npm install命令之前，在package.json里添加一个依赖,后面会用到。
修改webpack配置
这里展示一下我的项目目录
├── package.json ├── README.md ├── vue.config.js ├── vue.util.js ├── public │ ├── index.html │ ├── logo.ico ├── src │ ├── assets │ ├── components │ ├── pages │ │ ├── communityGroup │ │ │ ├── app.vue │ │ │ ├── communityGroup.html │ │ │ ├── communityGroup.js │ │ │ ├── logo.ico │ │ │ ├── router.js │ │ │ ├── searchStore │ │ │ │ ├── index.vue │ │ │ ├── storeList │ │ │ │ ├── index.vue │ │ │ ├── submitSuccess │ │ │ │ ├── index.vue │ │ │ ├── userInfo │ │ │ ├── index.vue │ │ ├── communityhead │ │ ├── jump-mp │ │ ├── member │ ├── store │ │ ├── index.js │ │
在这一步里我们需要改动的文件分别是：
- vue.utils.js
- vue.config.js
我就按照顺序放出完整的文件内容，然后在做修改或添加的位置用注释符标注出来：
vue.util.js文件
const path = require('path')
const glob = require('glob') //nodejs的glob
const startPath = '/src/pages/'
const pagePath = path.resolve(__dirname, '.' + startPath)
exports.pages = function () { //生成对应目录html、js
let entryFiles = glob.sync(pagePath + '/**/*.html') //使用文件路径
let obj = {}
entryFiles.forEach(filePath => {
let dirPath = filePath.substring(0, filePath.lastIndexOf('/'))
let dirName = dirPath.substring(dirPath.lastIndexOf('/') + 1)
let filename = filePath.substring(filePath.lastIndexOf(startPath) + startPath.length, filePath.lastIndexOf('/'));
if (filename.endsWith(dirName)) {
obj[filename] = {
entry: filePath.substring(0, filePath.lastIndexOf('.html')) + '.js',
template: filePath.substring(0, filePath.lastIndexOf('.html')) + '.html'
}
}
})
return obj
}
vue.config.js文件
注意vue.util.js文件引入以及pages
const utils = require('./vue.util') //多页面文件引入
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
pages: utils.pages(), // 多页配置
publicPath: '/', // 部署生产环境和开发环境下的URL：可对当前环境进行区分
lintOnSave: false, // 是否在代码保存时进行eslint检测
productionSourceMap: false, // 是否在构建生产包时生成sourceMap文件，false将提高构建速度
devServer: { // webpack-dev-server 相关配置
port: '8090', // 端口号
https: false, // 关闭https
hotOnly: false, // 取消热更新
// proxy: { // 使用代理
// '/api': {
// target: 'tt.cn', // 目标代理服务器地址
// changeOrigin: true, // 允许跨域
// pathRewrite:{
// '^/api': '' // 重写路径，需要设置重写的话，要在后面的调用接口前加上/api来代替target
// }
// }
// }
},
chainWebpack: (config)=>{
// 移除 prefetch 插件
config.plugins.delete('prefetch'),
config.resolve.alias
.set('@', resolve('src'))
.set('assets',resolve('src/assets'))
.set('components',resolve('src/components'))
},
// webpack手动配置
configureWebpack: (config) => {
if (isProduction) {
// 取消webpack警告的性能提示
config.performance = {
hints: 'error',
maxAssetSize: 3000000, // 生成文件的最大体积，整数类型（以字节为单位）
maxEntrypointSize: 5000000, // 入口起点的最大体积，整数类型（以字节为单位）
assetFilter: function(assetFilename) { // 只给出js文件的性能提示
return assetFilename.endsWith('.js')
}
}
}
}
}
至此，webpack的多页面配置就结束了。
但是还没完啦，下面继续讲下项目的文件结构。
这是众多h5项目中的一个跳转场景（communityGroup），这里需要注意的是目录名称、communityGroup.html和communityGroup.js命名的一致，在主包communityGroup.js 中完成引入需要的模块及其项目挂载，相当于单页面应用中的app.vue
├── src
│ ├── assets
│ ├── components
│ ├── pages
│ │ ├── communityGroup
│ │ │ ├── app.vue
│ │ │ ├── communityGroup.html
│ │ │ ├── communityGroup.js
│ │ │ ├── logo.ico
│ │ │ ├── router.js
│ │ │ ├── searchStore
│ │ │ │ ├── index.vue
│ │ │ ├── storeList
│ │ │ │ ├── index.vue
│ │ │ ├── submitSuccess
│ │ │ │ ├── index.vue
│ │ │ ├── userInfo
│ │ │ ├── index.vue
│ │ ├── communityhead
│ │ ├── jump-mp
│ │ ├── member
│ ├── store
│ │ ├── index.js
│ │
然后启动npm run build尝试打包文件部署，已经差不多了，简单的多页面配置就ok啦！
这是我放在GitHub上的项目，里面有整个配置文件，可以参看一下：多页面应用