vue.config.js | 易学教程

3.x的脚手架封装了webpack绝大部分配置，使得生成的项目更加清晰，但是在开发中免不了会有自己的个性需求，来添加一些自己的项目配置，此时只需在项目的根目录下新建一个vue.config.js文件即可，

module.exports = {
   //打包文件输出路径，即打包到哪里
  outputDir: 'dist',
  // 静态资源地址
  assetsDir: 'static',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false, 
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false, 
  filenameHashing: true, //文件hash
 
  // chainWebpack 这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则
  // 和具名插件，可以通过其提供的一些方法链式调用，在cli-service中就使用了这个插件
  chainWebpack: () => {},
 
   /* 
    configureWebpack是调整webpack配置最简单的一种方式，可以新增也可以覆盖cli中的配置。
    可以是一个对象：被 webpack-merge 合并到webpack 的设置中去
    也可以是一个函数：如果你需要基于环境有条件地配置行为，就可以进行一些逻辑处理，可以直接修改或
新增配置，(该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。
    在函数内，你可以直接修改配置，或者返回一个将会被合并的对象。
  */
   configureWebpack: {}   // 对象形式 或者以下函数形式
   configureWebpack:config=>{}  //函数形式  
}

这个 configureWebpack 也可以是函数形式。

实操：
1.配置import 和 require 等路径别名 ：

1.1 使用 chainWebpack 方法

const path = require('path');
function resolve (dir) {
  //此处使用path.resolve 或path.join 可自行调整
  return path.join(__dirname, dir)
}
module.exports = {
  devServer: {
   ...
  },
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  filenameHashing: true, //文件hash
  chainWebpack: config => {
    config.resolve.alias
      // key,value自行定义，比如.set('@assets', resolve('src/assets'))
      .set(key,value)
  }
}

1.2 使用 configureWebpack方法

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  devServer: {
     ...
  },
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  filenameHashing: true, //文件hash
  configureWebpack: {
    resolve: {
      alias: {
        '@assets': resolve('src/assets')
      }
    }
  },
}

函数形式

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  devServer: {
     ...
  },
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false, 
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  //文件hash
  filenameHashing: true, 
  configureWebpack: config => {
     if (isProduction) {
         ...
     } else {
       ...
     };   
    // 0.直接修改 对象属性 配置
     config.resolve.alias['@asset'] = resolve('src/assets')
    
    // 1.或者return 形式也可以
     return {
       resolve: {
         alias: {
          '@asset':resolve('src/assets')
         }
       }
     }  


  }
}

来源：oschina

链接：https://my.oschina.net/u/560237/blog/4840189

标签

Vue.js

javascript

Webpack