intelligent-medicine-cabinet/mini-pro-web/vue.config.js

const path = require("path");
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  publicPath: process.env.NODE_ENV==='production'?process.env.VUE_APP_PRE_PATH:"/",
    devServer: {
      port: 8080,
      progress: false, // vue-cli-service serve 启动进度的显示和隐藏
      headers: {
        'Access-Control-Allow-Origin': '*'
      },
    },
    chainWebpack: config => {
      config.plugin('html')
        .tap(args => {
          args[0].alias =  process.env.VUE_APP_ALIAS
          args[0].name =  process.env.VUE_APP_TITLE
          return args
        })

        config.externals( {
            vue: "Vue",
            vuex: "Vuex",
            axios: "axios",
            lodash: "_",
            "vue-router": "VueRouter",
            "vant": "vant"
        })

        const svgRule = config.module.rule("svg");

        // 清除已有的所有 loader。
        // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
        svgRule.uses.clear();

        // 添加要替换的 loader
        // svgRule.use("vue-svg-loader").loader("vue-svg-loader");
        svgRule
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({
            symbolId: "icon-[name]"
        });

    },
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            autoprefixer(),
            pxtoviewport({
              viewportWidth:375
            })
          ]
        }
      }
    }
  }