pad_spa/vue.config.js

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // 测试
  // publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/test_pad/dist' :
  //   process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
  // 正式
  // publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/dist' :
  //   process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
  // 设置跨域
  crossorigin: 'anonymous',
  /**
     * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
     *  map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
     *  有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
     * */
  productionSourceMap: false,
  transpileDependencies: ['swiper', 'dom7'],

  // 它支持webPack-dev-server的所有选项
  devServer: {
    host: "0.0.0.0",//ip本地
    port: 8083, // 端口号
    https: false, // https:{type:Boolean}配置前缀
    open: false, //配置自动启动浏览器
    proxy: '' // 配置跨域处理
  },
  configureWebpack: {
    externals: {
      'axios': "axios"
    }
    // 这是七牛找不到资源时的紧急处理方法，通过修改hash位数修改编译后的资源文件名
    // output: { 
    //     filename: `js/[name].[hash:6].js`,
    //     chunkFilename: `js/[name].[hash:6].js`
    // },
    // plugins: [
    //     new MiniCssExtractPlugin({
    //         filename: `css/[name].[hash:6].css`,
    //         chunkFilename: `css/[name].[hash:6].css`
    //     })
    // ]
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px", // 把什么单位转换成vw
            viewportWidth: 1000, // 视口宽度，设计稿宽度
            viewportHeight: 600, // 视口高度，设计稿高度
            unitPrecision: 5, // 转换成vw单位的小数点后的保留位数
            propList: ["*"], // 属性列表，表示你要把哪些css属性的px转换成vw
            viewportUnit: "vw", // 使用的单位，目前可选单位有vw,vh。
            fontViewportUnit: "vw", // 字体使用的单位
            selectorBlackList: ['van', 'el-'], // 匹配不被转换为vw的选择器
            minPixelValue: 1,
            mediaQuery: false,
            replace: true, // 是否直接更换属性值，而不添加备用属性
            exclude: /(\/|\\)(node_modules)(\/|\\)/,
          })
        ]
      }
    }
  }
}