vue-web-frame/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 在每次保存时 lint 代码
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本

  configureWebpack: {
    module: {

      rules: [
        {
          test: /\.js$/,
          loader: "@open-wc/webpack-import-meta-loader"
        },
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        },
      ]
    }
  },

  chainWebpack: (config) => {
    config.resolve.symlinks(true); // 修复热更新失效
    config.plugin('html')
      .tap(args => {
        args[0].title = "web框架";
        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');

    // const elementPlusMjs = config.module.rule('elementPlusMjs');
    // elementPlusMjs.test(/\.mjs$/).include.add(resolve('/node_modules')).end();

    // 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",Bicubik.ttf
    //     });

    // // 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, // 是否打开浏览器
  }
}