vue.config.js 文件个人配置

前言

vue cli3 版本隐藏了对于 webpack 的配置，那么如果有需要对其中的一些配置进行修改的话，可以在文件的根目录下新建 vue.config.js 文件。

配置

以下是自己平时会对webpack做出的一些配置，仅供参考。

// vue.config.js
const path = require('path');    //引入 node 包中的 path 文件，动态的获取当前文件的路径
var env = process.env.NODE_ENV
function resolve(dir) {
    return path.join(__dirname, dir)
}
// 以上代码属于不知道有什么用，但是写了也不会报错

module.exports = {
    //基本路径
    //baseUrl: './', //加 ./ 解决404问题 ，现在baseUrl已经替换为publicPath了
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
    outputDir: 'dist',
    // 放置静态资源的地方 (js/css/img/font/...)
    assetsDir: '',  // 我的静态资源文件没有存放在static下，所以为空
    //以多页模式构建应用程序。
    indexPath: 'index.html',    // 入口文件
    pages: undefined,
    //是否使用包含运行时编译器的 Vue 构建版本
    //为true带测试环境，提交会大很多
    productionSourceMap: false,
    devServer: {
      port: 8080,
      host: '0.0.0.0',
      https: false, // https:{type:Boolean}
      open: true, //配置自动启动浏览器
      proxy: null,
      publicPath: '../',  //这里解决静态资源引用路径问题，在开发环境预览的时候可以注释掉
      // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
      // proxy: {
      //   '/api': {
      //     target: '<url>',
      //     ws: true,
      //    changeOrigin: true
      //   },
      //   '/foo': {
      //     target: '<other_url>'
      //   }
      // },  // 配置多个代理
   },
  configureWebpack: {   //配置别名
      resolve: {
        alias: {
          'assets': '@/assets',
          'components': '@/components',
          'network': '@/network',
          'views': '@/views',
        }
      }
    },
  chainWebpack: config => {    // 配置px2rem-loader
      config.module
        .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
        .loader('px2rem-loader')
        .options({
          remUnit: 192
        })
        .end()
    }
  }