vue-cli4版本配置vue.config.js和分環境打包

以前寫了一篇vue-cli3的配置（https://segmentfault.com/a/11...），建議升級到vue-cli4。
vue-cli4腳手架建立的目錄更加的合理性，其餘好像沒什麼變化
vue-cli的升級官網上有介紹，建議都使用yarn
卸載：

npm uninstall vue-cli -g或yarn global remove vue-cli
若是你的版本是vue-cli3的話，
npm uninstall @vue/cli -g或yarn global remove @vue/cli

安裝：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

建立你的項目（建立的方式看上面的連接）

vue create hello-world(項目名)

重點介紹分環境打包下的vue.config.js代碼以下（注意process.env.outputDir和process.env.VUE_APP_MODE和.env文件有關）

const path = require('path')

module.exports = {
  publicPath: './', // 基本路徑,打包時加上.
  outputDir: process.env.outputDir, // 輸出文件目錄
  lintOnSave: false, // eslint-loader 是否在保存的時候檢查
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // webpack配置
  chainWebpack: (config) => {
    config.resolve.symlinks(true)
  },
  configureWebpack: (config) => {
    if (process.env.VUE_APP_MODE === 'production') {
      // 爲生產環境修改配置...
      config.mode = 'production'
    } else {
        // 爲開發環境修改配置...
        config.mode = 'development'
    }
    Object.assign(config, {
      // 開發生產共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          '@p': path.resolve(__dirname, './src/views')
        } // 別名配置
      }
    })
  },
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件
  // css相關配置
  css: {
    // extract: true, // 是否使用css分離插件 ExtractTextPlugin
    sourceMap: false, // 開啓 CSS source maps?
    loaderOptions: {
      css: {}, // 這裏的選項會傳遞給 css-loader
      postcss: {
        plugins: [
          // 把px單位換算成rem單位
          require('postcss-pxtorem')({
            rootValue: 75, // 換算的基數(設計圖750的根字體爲32)
            selectorBlackList: ['.van-'], // 要忽略的選擇器並保留爲px。
            propList: ['*'], // 能夠從px更改成rem的屬性。
            minPixelValue: 2 // 設置要替換的最小像素值。
          }),
          require('autoprefixer')
        ]
        // plugins: [
        //   require('autoprefixer')
        // ]
      } // 這裏的選項會傳遞給 postcss-loader
    }, // css預設器配置項 詳見https://cli.vuejs.org/zh/config/#css-loaderoptions
    // modules: false, // 啓用 CSS modules for all css / pre-processor files.
    requireModuleExtension: true
  },
  parallel: require('os').cpus().length > 1, // 是否爲 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啓用，僅做用於生產構建。
  pwa: {}, // PWA 插件相關配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  // webpack-dev-server 相關配置
  devServer: {
    open: true, // 自動打開瀏覽器
    host: '0.0.0.0', // 容許外部ip訪問
    port: 8022, // 端口
    https: false, // 啓用https
    overlay: {
      warnings: true,
      errors: true
    }, // 錯誤、警告在頁面彈出
    // proxy: {
        // [process.env.VUE_APP_MODE]: {
        //     target: `http://cs.ep.eichong.com:2482/api`,
        //     changeOrigin: true,
        //     pathRewrite: {//看後臺是否有，決定是否重寫
        //         ["^" + process.env.VUE_APP_API_URL]: ""
        //     }
        // }
  },
  // 第三方插件配置
  pluginOptions: {}
}

不一樣環境的.env文件（NODE_ENV這個參數好像沒什麼關係），VUE_APP_API_URL爲接口網址,能夠直接調用process.env.VUE_APP_API_URL

文件.env.dev

NODE_ENV = 'production'
VUE_APP_MODE = 'dev'
VUE_APP_API_URL = '--------'
outputDir = dev

文件.env.development

NODE_ENV = 'production'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = '------'
outputDir = development

文件.env.pre

NODE_ENV = 'production'
VUE_APP_MODE = 'pre'
VUE_APP_API_URL = '----'
outputDir = pre

文件.env.production

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = '------'
outputDir = production

修改package.json，打包命令分別爲
yarn serve
yarn build
yarn build-dev
yarn build-test
yarn build-pre
yarn build-publish

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-dev": "vue-cli-service build --mode dev",
    "build-test": "vue-cli-service build --mode test",
    "build-pre": "vue-cli-service build --mode pre",
    "build-publish": "vue-cli-service build && vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  }

區別打包的輸出路徑分別爲dist,dev，test，pre，production
而後修改.gitignore文件，增長以下

/dist
/dev
/test
/pre
/production