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/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",
    port: 8083, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    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-pxtorem')({
    //           // TODO：这个值该怎么算
    //         rootValue: 32, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
    //         selectorBlackList: ['van'], // 忽略转换正则匹配项
    //         propList: ['*'],  //要转换的匹配项
    //       })
    //     ]
    //   }
    // }
    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)(\/|\\)/,
              })
          ]
      }
    }
  }
}