vue-cli3 配置 vue.config.js 環境變量env

const path = require("path");

const uglifyJsPlugin = require("uglifyjs-webpack-plugin");

const IsProduction = process.env.NODE_ENV === "production";

// 引入檔案
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: "./",

  // 輸出檔案目錄
  outputDir: "dist",

  // eslint-loader 在儲存的時候校驗
  lintOnSave: true,

  devServer: {
    compress: false, // 是否壓縮
    open: true, // 啟動預設打開浏覽器
    proxy: {
      "/api": {
        target: "http://www.xxx.com",
        ws: true, // websocket
        changeOrigin: true,
        pathRewrite: {
          "/api": "/"
        }
      }
    },
  },
  // css相關配置
  css: {
    extract: true, // css分離插件 自帶
    sourceMap: false, // 友善開發 錯誤定位
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/common/reset.scss";`
      }
    },
    modules: false // 是否啟用css-moudle
  },
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@img", resolve("src/assets/img"))
      .set("@api", resolve("src/api/api"));
    if (IsProduction) {
      // 删除預加載
      config.plugins.delete("preload");
      // 開啟代碼壓縮
      config.optimization.minimize(true);
      // 分割代碼 相同代碼放一塊
      config.optimization.splitChunks({
        chunks: "all"
      });
    }
    // 開發環境
  },
  configureWebpack: config => {
    if (IsProduction) {
      config.plugins.push(
        new uglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_debugger: true,
              drop_console: true
            },
            sourceMap: false,
            // 多程序
            parallel: true
          }
        })
      );
    } else {
      // 開發環境 
    }
  },

  productionSourceMap: false,
  // 啟動并行化 預設 ("os").cpus().length-1
  parallel: require("os").cpus().length > 1,
}

           

全局變量分生産和開發環境，做類似if判斷，現在.env即可

.env 做全局，不分環境

.env.production和.env.development 針對各自環境變量

package.json

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
           

當然如果你想要test,也可以，這裡就不多說了，方法類似

取值

process.env.xx