编程知识 cdmana.com

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')
         }
       }
     }  


  }
}

2. 

版权声明
本文为[东东笔记]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/560237/blog/4840189

Scroll to Top