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) {