Vue-cli 3.x 的多页面应用不多说了, 可以直接看官网 https://cli.vuejs.org/zh/config/#pages
多页面应用简单理解就是: 一个项目有多个入口,只要输入不同的入口地址即可.
一般应用于 css 换肤, 管理系统的 前端展示 和 后台管理 等 应用场景.
目的是为了一些公用资源(css,js,组件等)高效利用, 更利于项目的维护 及 开发效率.
下面我们来具体看一下怎么配置
我们的集成环境搭建其实就是一个多页面应用, 只不过是每次只动态 运行 / 打包 一个 项目
这样即可以集成多个项目,又可以充分利用公共资源,且项目只有一个入口,
如同普通单页面程序一样(建议先去了解一下多页面应用,以便更好理解此环境的搭建)
第一步.创建一个 vue-cli 3.x 的项目
详细的步骤可参考 https://www.jianshu.com/p/d3343762a770
第二步.在 src 文件夹下创建多个项目
image
如上图, src 下本应是 assets compontents app.vue main.js 等文件,
现在我们在 src 下创建了多个项目,每个项目包含了原src下所有的文件及文件夹
**注意: 每个项目的 main.js 的名称不能一样, 一般就是 项目名称_main.js , **如 proj1_main.js
第三步.在项目根目录创建 vue.config.js 文件 并 配置
(1).增加函数, 动态 配置 入口文件
class MultiModule {
constructor (name) {
let tmpObj = {};
name.indexOf('_') > -1 ? name = name.split('_')[0] : '';
tmpObj[name] = {
// page 的入口
entry: `src/${name}/${name}_main.js`,
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html'
}
Object.assign(this,tmpObj)
}
}
(2).配置动态地址配置
// npm 指令的 类型 serve / build
let ENV_scripts = process.env.npm_lifecycle_script,
NPM_TYPE = ENV_scripts.split(' --mode ')[1];
process.env.VUE_APP_NPM_TYPE = NPM_TYPE;
process.env.NODE_ENV = ENV_scripts.indexOf(' serve ') > -1 ? "development":"production"
process.env.VUE_APP_PUBLICPATH = '/'
// 不同环境的 地址配置
if(NPM_TYPE == 'proj1'){
process.env.VUE_APP_PROJ_NAME = 'proj1'
process.env.VUE_APP_HTTP_URL = 'http://xx.xx.xx.xx:8888/'
}else if(NPM_TYPE == 'proj2'){
process.env.VUE_APP_PROJ_NAME = 'proj2'
process.env.VUE_APP_HTTP_URL = 'http://xx.xx.xx.xx:8888/'
process.env.VUE_APP_PUBLICPATH = '/proj2/'
}
(3).导出配置文件(参考)
require('./tools/getUrls.js')
const chalk = require('chalk')
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
function getProxyInfo(){
let tmpObj = {}, tmpPathRewrite = {},
tmpKey = 'api';
tmpPathRewrite['^/' + tmpKey] = '/';
tmpObj['/'+tmpKey] = {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: tmpPathRewrite
}
return tmpObj;
}
const pages = new MultiModule( process.env.VUE_APP_PROJ_NAME )
module.exports = {
pages: pages,
// 没有书写outputDir属性 默认'dist' 对应dev.assetsSubDirectory
outputDir: 'dist',
// compiler: false,
//在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath ( 资源地址 )
publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' ,
lintOnSave: false,
runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: false, // 生产环境的 source map
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {}
// 启用 CSS modules for all css / pre-processor files.
// modules: false
},
// 运行配置
devServer: {
// host: '127.0.0.1',
port: '8866', //代理端口
open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
// https: false,
// hotOnly: false,
// disableHostCheck: true,
proxy: getProxyInfo(),
disableHostCheck: true //webpack4.0 开启热更新
},
chainWebpack: config => {
// 提示输出的哪个地址
console.log(chalk.blueBright('\n\n running ' + process.env.VUE_APP_PROJ_NAME + ' : ') +
chalk.yellowBright(process.env.VUE_APP_HTTP_URL + ' please wait... \n'));
// 修复HMR(热更新)失效
config.resolve.symlinks(true),
//set第一个参数：设置的别名，第二个参数：设置的路径
config.resolve.alias
.set('@',resolve('./src/'+process.env.VUE_APP_PROJ_NAME))
.set('components',resolve('./src/common/components'))
.set('assets',resolve('./src/common/assets'))
//.set('views',resolve('./src/views'))
//注意 store 和 router 没必要配置
},
//webpack配置
configureWebpack: {
//关闭 webpack 的性能提示
// performance: {
// hints:false
// },
//或者
performance: {
hints:'warning',
//入口起点的最大体积
maxEntrypointSize: 50000000,
//生成文件的最大体积
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
}
}
第四步.或配置不同项目的启动地址(不启用动态地址配置)
在根目录创建 .env.proj1, .env.proj2, .env.proj3, .env.proj4 文件
image
.env.proj1 为例, 文件内容如下:
NODE_ENV = "production"
VUE_APP_PROJ_NAME = 'proj1'
VUE_APP_HTTP_URL = 'http://xx.xx.xx.xx'
第五步.配置 package.json 文件 启动 / 打包 不同项目
**"scripts": {** "serve": "vue-cli-service serve",
"serve:proj1": "vue-cli-service serve --mode proj1",
"serve:proj2": "vue-cli-service serve --mode proj2",
"serve:proj3": "vue-cli-service serve --mode proj3",
"serve:proj4": "vue-cli-service serve --mode proj4",
"build": "vue-cli-service build",
"build:proj1": "vue-cli-service build --mode proj1",
"build:proj2": "vue-cli-service build --mode proj2",
"build:proj3": "vue-cli-service build --mode proj3",
"build:proj4": "vue-cli-service build --mode proj4",
"lint": "vue-cli-service lint"
}
第六步.控制输入不同命令 启动 / 打包 不同项目
npm run serve:proj1
npm run serve:proj2
npm run serve:proj3
npm run serve:proj4
npm run build:proj1
npm run build:proj2
npm run build:proj3
npm run build:proj4
网友评论