data_governance/vue.config.js

module.exports = {
    lintOnSave: false,
    devServer: {
      host:'0.0.0.0',
      port:8000, // 服务端口 
      // port:8080,
      open: false,//配置自动启动浏览器 
      proxy: { // 设置代理
      '/metroapi': {
        target: 'http://192.168.20.58:8088',// http://192.168.20.58:8086 http://192.168.20.22:8088
        changeOrigin: true, //允许跨域
        pathRewrite: {
            '^/metroapi': ''
            }
        },
        // '/apis': {
        //   target: 'http://192.168.20.54:7777',//
        //   changeOrigin: true, //允许跨域 再设立一个可以跨不同的域
        //   pathRewrite: {
        //       '^/apis': ''
        //       }
        //   }
      },
    },
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //部署后请求路径
    outputDir:'dist', // 打包的目录
    chainWebpack: config => {
      config.module
        .rule('stylus')
        .oneOf('vue')
        .use('px2rem-loader')
        .loader('px2rem-loader')
        .before('postcss-loader') // this makes it work.
        .options({
          remUnit: 192,
          remPrecision: 8
        })
        .end()
    },
    css: {
      loaderOptions: {
          postcss: {
              plugins: [
                  require('postcss-plugin-px2rem')({
                      rootValue: 192, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                      unitPrecision: 10, //允许REM单位增长到的十进制数字。
                      //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                      // propBlackList: [], //黑名单
                      exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                      // selectorBlackList: [], //要忽略并保留为px的选择器
                      // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                      // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                      mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
                      minPixelValue: 0 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                  }),
              ]
          },
      }
  }   
    // chainWebpack: (config) => {
    //   config.entry('main').add('babel-polyfill');
    // },
    // transpileDependencies: [
    //   'view-design'  // 指定对第三方组件也进行babel-polyfill处理
    // ]
};