ludash/vue.config.js

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "/ludash",
  chainWebpack(config) {
    config.module.rule("images").test(/\.(png|jpeg|jpg|hdr)$/);
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: {
            "primary-color": "#42b883",
            "font-color": "#444",
          },
        },
      },
      postcss: {
        postcssOptions: {
          plugins: [
            require("autoprefixer")({
              overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8",
                "last 10 versions", // 所有主流浏览器最近10版本用
              ],
              grid: true,
            }),
            require("postcss-pxtorem")({
              rootValue: 140, //设计稿宽度%10 比如 1920
              exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module|src)/
              propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为["*"]全部，假设需要仅对边框进行设置，可以写]['*','!border*']
              selectorBlackList: [/svg/, /ori-/], //，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
              replace: true, //替换包含rems的规则。
              mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
              minPixelValue: 0, //设置要替换的最小像素值(3px会被转rem)。 默认 0
            }),
          ],
        },
      },
    },
  },
});