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,也可以,这里就不多说了,方法类似

VUE_APP_a=http://www.baidu.com  // 前缀VUE_APP_ 不然不识别

取值
process.env.xx
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐