platform_largeScreen/vue.config.js

const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");

const cesiumSource = "./node_modules/cesium/Source";
const cesiumWorkers = "../Source/Workers";

function extendDefaultPlugins(arr) {
  let plug = [
    "removeDoctype",
    "removeXMLProcInst",
    "removeComments",
    "removeMetadata",
    "removeEditorsNSData",
    "cleanupAttrs",
    "mergeStyles",
    "inlineStyles",
    "minifyStyles",
    "cleanupIDs",
    "removeUselessDefs",
    "cleanupNumericValues",
    "convertColors",
    "removeUnknownsAndDefaults",
    "removeNonInheritableGroupAttrs",
    "removeUselessStrokeAndFill",
    "removeViewBox",
    "cleanupEnableBackground",
    "removeHiddenElems",
    "removeEmptyText",
    "convertShapeToPath",
    "convertEllipseToCircle",
    "moveElemsAttrsToGroup",
    "moveGroupAttrsToElems",
    "collapseGroups",
    "convertPathData",
    "convertTransform",
    "removeEmptyAttrs",
    "removeEmptyContainers",
    "mergePaths",
    "removeUnusedNS",
    "sortDefsChildren",
    "removeTitle",
    "removeDesc",
  ];
  return plug.concat(arr);
}

// 添加less继承
function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [resolve("src/assets/styles/common/common.less")],
    });
}

module.exports = {
  publicPath: "./", // 默认'/'，部署应用包时的基本 URL
  indexPath: "index.html", // 相对于打包路径index.html的路径
  outputDir: "dist", // 'dist', 生产环境构建文件的目录
  assetsDir: "static", // 相对于outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 li
    runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
    parallel: false,

  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, "Assets"), to: "Assets" },
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
      ]),
      new CopyWebpackPlugin([
        {
          from: path.join(cesiumSource, "ThirdParty/Workers"),
          to: "ThirdParty/Workers",
        },
      ]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./"),
      }),
    ],
  },

  chainWebpack: (config) => {
    config.resolve.symlinks(true); // 修复热更新失效
    config.plugin("html").tap((args) => {
      args[0].title = "发电场站生产实时运营管理平台";

      return args;
    });
    // 路径别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@node", resolve("node_modules"))
      .set("@com", resolve("src/components"))
      .set("@assets", resolve("src/assets"))
      .set("@api", resolve("src/api"))
      .set("@store", resolve("src/store"))
      .set("@modeConfig", resolve("public/static/config"))
      .set("@tools", resolve("src/tools"))
      .set("cesium", resolve("node_modules/cesium/Source"));

    // less 继承
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach((type) =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );

    const metaLoaderRule = config.module.rule("meta-loader");
    metaLoaderRule
      .test(/\.js$/)
      .use("@open-wc/webpack-import-meta-loader")
      .loader("@open-wc/webpack-import-meta-loader");

    // svg 雪碧图
    config.module // 排除其他svg-loader
      .rule("svg")
      .exclude.add(resolve("src/assets/icon/svg"))
      .end()
      .exclude.add(resolve("src/assets/icon/svg_fill"))
      .end();

    // svg雪碧图
    const svgRule = config.module.rule("icons");
    svgRule
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icon/svg"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "svg-[name]",
        // extract: true,
        // publicPath: "img/",
        // spriteFilename: "svg-sprite-[hash:8].svg",
      });

    // config
    //     .plugin("svgsprite")
    //     .use(SVGSpriteLoaderPlugin, [{
    //       plainSprite: true
    //     }]);

    // svgo 去除svg中无用元素
    svgRule
      .use("svgo-loader")
      .loader("svgo-loader")
      .options({
        plugins: extendDefaultPlugins([
          {
            name: "removeAttrs",
            params: {
              attrs: "fill",
            },
          },
        ]),
      });

    // svg雪碧图 不去除fill属性
    // const svgRuleFill = config.module.rule('icons_fill');
    // svgRuleFill.test(/\.svg$/)
    //     .include.add(resolve('src/assets/icon/svg_fill'))
    //     .end()
    //     .use('svg-sprite-loader')
    //     .loader('svg-sprite-loader')
    //     .options({
    //         symbolId: 'fill-[name]',
    //         // extract: true,
    //         // publicPath: "img/",
    //         // spriteFilename: "svg-sprite-[hash:8].svg",
    //     });

    // // config
    // //     .plugin("svgsprite")
    // //     .use(SVGSpriteLoaderPlugin, [{
    // //       plainSprite: true
    // //     }]);

    // // svgo 去除svg中无用元素
    // svgRuleFill.use('svgo-loader').loader('svgo-loader').options({
    //     plugins: extendDefaultPlugins([])
    // });
  },

  devServer: {
    //代理配置
    proxy: {
      "/cbk": {
        target: "https://h5.caibeike.com.cn/", // 请求地址

        changeOrigin: true, // 在vue-cli3中，默认changeOrigin的值是true,意味着服务器host设置成target，这与vue-cli2不一致，vue-cli2这个默认值是false
        // changeOrigin的值是true,target是host, request URL是http://baidu.com
        // 如果设置changeOrigin: false，host就是浏览器发送过来的host，也就是localhost:8082。

        pathRewrite: {
          // 路径重写，eg:把api接口替换为''
          "^/cbk": "",
        },
      },
    },
    open: false, // 是否打开浏览器
  },
};