vue.config.js 相关配置

vue-cli4脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建
vue.config.js(相当于之前的webpack.config.js) 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。下面是vue.config.js的相关配置

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

module.exports = {
  //执行 npm run build 统一配置文件路径（本地访问dist/index.html需'./'）
  //NOOE_ENV:Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境
  //publicPath:'/'
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
  outputDir: 'dist',//输出文件目录
  assetsDir: 'assets',//放置生成的静态资源(js,css,img,fonts)
  
  //indexPath指定生成的输出路径(相对于outputDir).也可以是一个绝对路径
 // indexPath:'index.html',//可以不设置一般会默认
 // filenameHashing:true,//文件命名中是否包含了hash以便更好的控制缓存(必须是在默认的情况下生成的index.html)
  lintOnSave: false,//设置是否在开发环境下每次保存代码时都启用eslint验证
  runtimeCompiler:false,//是否使用带有浏览器内置编译的完整构建版本(会让应用额外的增加10kb左右)
  productionSourceMap:false,//如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  
  css: {
    requireModuleExtension:true,//启用css预加载
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtoviewport({
            viewportWidth: 375,
            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
            selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            mediaQuery: false // 允许在媒体查询中转换`px`
          })
        ]
      }
    }
  },
  devServer:{
      open:false,//编译完成是否打开网页,
      host:'0.0.0.0',//指定使用地址，默认localhost，0.0.0.0代表可以被外界访问
      port: 1882,//访问端口
      https:false,//用于设置是否启用https
      hot:true,//开启热加载
      inline:true,//用于设置代码保存时是否自动刷新页面
      
      //注： gzip 压缩 用于减少服务器向前端传输的数据量，提高浏览的速度。
      //compress:true,//对devServer 所有服务启用 gzip 压缩
      
      //注意：需要配合 open来使用。如果Vue router 为 hash mode。应在url前面补上/#。如：openPage: '/#/about'
     // openPage:'/differenet/page',//指定deserver编译后自动打开页面
     
     
     // headers:{//在所有响应中添加首部内容
     //     'X-Custom-Foo':'bar'
     // }
     
     //overlay:true,//当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用。
     // overlay:{
     //     warning: true,
     //     errors:true,
     // }
     proxy:{
         '/api':{//代理器中设置/api,项目中请求路径为/api的替换为target
             //代理地址，这里设置的地址会代替axios中设置的baseURL
             target:'XXXXXX', //使用url模块解析url字符串，目标服务器域名例如：https://testretail.sdeerlive.com/
             ws:true,//开启ws,如果是http代理此处可以不用设置
             
             //默认值：false 将主机标头的原点更改为目标URL
             changeOrigin: true,//如果接口跨域，需要进行这个参数配置
             
             //忽略api
             pathRewrite:{
                 '^/api': '/',
                 //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                 //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
             }
         }
     }
  }
};