vue cli3.0构建多页面应用
背景
实际工作中,存在不同业务之间的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上的项目,里面有整个配置文件,可以参看一下:多页面应用