vue.config.js

const pxtoviewport = require('postcss-px-to-viewport')

const path = require('path')

function resolve(dir) {

  return path.join(__dirname, dir)

}

const Timestamp = new Date().getTime() // 当前时间为了防止打包缓存不刷新，所以给每个js文件都加一个时间戳

module.exports = {

  outputDir: process.env.outputDir,

  publicPath: '/',

  lintOnSave: 'warning',

  productionSourceMap: false, // 不在production环境使用SourceMap

  devServer: {

    open: true,

    proxy: {

      '/api': {

        target: process.env.VUE_APP_TARGET_API, // 目标 API 地址

        changOrigin: true, // 跨域配置

        pathRewrite: {

          '^/api': '/'

        }

      }

    },

    overlay: {

      warnings: false,

      errors: true

    }

  },

  chainWebpack(config) {

    config.resolve.alias

      .set('@', resolve('src'))

  },

  configureWebpack: {

    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】

      filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,

      chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`

    }

  },

  css: {

    loaderOptions: {

      postcss: {

        plugins: [

          pxtoviewport({

            viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750

            // viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置

            unitPrecision: 3,

            // 指定`px`转换为视窗单位值的小数位数

            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw

            selectorBlackList: ['.van'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名

            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值

            mediaQuery: false // 允许在媒体查询中转换`px`

          })

        ]

      },

      scss: {

        prependData: `@import "~@/styles/variables.scss";@import "~@/styles/mixin.scss";`

      }

    }

  }

}