vue-cli3.0脚手架搭建之多入口设置
上一章节介绍了vue-cli3.0脚手架的创建及基础配置还未搭建项目的朋友们可以一步这里
主题宗旨: 利用项目中的环境变量来代替文件路径。用不同变量找到不同的文件
一、首先需要改下文件目录(主要是src下的文件目录)
1: 文件router文件中新建demo1、demo2两个文件,文件中用来放置针对不同项目的路由
2: 在views文件中新建demo1、demo2两个文件,这两个文件分别代表不同的项目
3: 将之前的env文件名的后缀改为 env.demo1、env.demo2 ,这两个文件用来设置不同项目的环境变量
env.demo1文件内容
VUE_APP_ITEMNAME = '项目1'
VUE_APP_ITEM = 'demo1'
NODE_ENV='production'
env.demo2文件内容
VUE_APP_ITEMNAME = '项目2'
VUE_APP_ITEM = 'demo2'
NODE_ENV='production'
二、修改package.json文件
"scripts": {
"serve": "vue-cli-service serve ",
"serve:demo1": "vue-cli-service serve --mode demo1",//--mode 后面带的是不同项目用到的参数
"serve:demo2": "vue-cli-service serve --mode demo2",
"build": "vue-cli-service build",
"build:demo1": "vue-cli-service build --mode demo1",
"build:demo2": "vue-cli-service build --mode demo2"
},
三、修改vue.config.js文件
//引入process
const pro = process.env
//修改别名路径
config.resolve.alias
.set('@', path.resolve(__dirname, './src'))
.set('@V', path.resolve(__dirname, `./src/views/${pro.VUE_APP_ITEM}`))//针对的不同项目
.set('@I', path.resolve(__dirname, './src/assets/image'))
.set('@F', path.resolve(__dirname, './src/shujudata/public.js'))
.set('@H', path.resolve(__dirname, './src/shujudata/https.js'))
.set('@R', path.resolve(__dirname, `./src/router/${pro.VUE_APP_ITEM}`))//针对不同项目的路由
.set('@S', path.resolve(__dirname, './src/store'))
.set('@C', path.resolve(__dirname, './src/components'))
.set('@U', path.resolve(__dirname, './src/shujudata/severUrl.js'))
// 生产环境或本地需要cdn时,才注入cdn
config.plugin('html').tap(args => {
args[0].title = process.env.VUE_APP_ITEMNAME//针对不同项目中的title
if (needCdn) args[0].cdn = cdn
return args
})
最后将上章节不用的删除
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'
// 将
if (isProduction && isZip) {
//改为
if (isZip) {