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.NODE_ENV==='test'?process.env.VUE_APP_PRE_PATH:"/",
  outputDir: 'intelligent-medicine-abinet',
  productionSourceMap:false,
  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
            })
          ]
        }
      }
    }
}