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