背景
實際工作中，存在不同業務之間的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: 'qdama.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
│ │ │ ├── qdamalogo.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上的項目，裏面有整個配置文件，可以參看一下：多頁面應用