【Vue-cli入门】脚手架配置文件vue.config.js详解

为什么要配置vue-cli

最近发现很多初学的小伙伴不知道vue-cli项目是可以进行配置的，配置脚手架可以解决很多细节问题，比如设置打包文件的输出目录名、打包引入资源的初始路径、配置本地服务器、配置webpack等。下面我把vue.config.js的常用配置代码分享给大家，然后会对每一个配置项做一个详细的介绍。

首先生成脚手架项目（会创建脚手架的此处略过）

1.npm install -g @vue/cli // 全局安装vue-cli
2.vue create xxx // 在当前目录下创建xxx项目

脚手架项目创建好后项目目录中是没有vue.config.js文件的，此时需要我们在项目的根目录下手动创建vue.config.js

vue.config.js基础配置代码

module.exports = {
    publicPath: "./", // 公共路径 默认为"/"，建议使用"./"相对路径
    devServer: {   // 本地服务器配置(npm run serve)
      port: 8080, // 端口
      host: "localhost", // 域名
      https: false, // 是否开启https
      open: true	// 是否在开启服务器后自动打开浏览器访问该服务器
    },
    lintOnSave: false,  // 取消lint语法检测，此处可不配置
    outputDir:"dist", // build打包输出目录
    assetsDir:"assets", // 静态文件输出目录，基于dist
    indexPath: "index.html",  // 输出html文件名
    productionSourceMap: false, // 取消.map文件的打包，加快打包速度
    configureWebpack: (config) => {
      // process.env为环境变量，分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度
      if (process.env.NODE_ENV !== 'production') return;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;	//生产环境去掉console.log
      return {  // 此处配置webpack.config.js的相关配置
        plugins: [],
        performance: {}
      };
    }
};

上述配置代码是通用的代码，大家拿到自己的项目上就可以用，也都是比较基础的配置项，下面我把每一个配置项的具体效果及意义解释给大家，上面代码能看懂的就不用看此章节了。

1.publicPath——公共路径配置项，默认为"/"，此配置项是影响打包生成文件的引入资源公共路径的

publicPath: "/project_2",

先看一下配置之前的打包文件

再看一下按配置后的打包文件

可以看到所有引入文件的地址前都被做了处理

2.devServer——本地服务器配置

devServer: {   // 本地服务器配置(npm run serve)
  port: 8080, // 端口
  host: "localhost", // 域名
  https: false, // 是否开启https
  open: true	// 是否在开启服务器后自动打开浏览器访问该服务器
},

这个配置项所影响的只有本地服务器，也就是用npm run serve打开的webpack服务器的配置项，这里强调一下open:true这个配置项是在我们使用npm run serve部署本地服务器后自动打开浏览器并访问该服务器，这里默认是false，所以配置此项后是可以节省我们打开浏览器的操作的。

3.lintOnSave——lint语法检测

lintOnSave: false,

这里配置为true时打包后会严格进行代码lint规范检测，这里通常配置为false，对代码规范有很强的要求的项目可以开启，开启后每次打包后或在webpack服务器的控制台上都会把你代码不规范的地方balabalabala的列出来一片黄色的字，不懂的朋友可以查一下lint规范，这里举个例子，比如你的代码是这样写的：

if(this.init){ 
	var a=1; 
}else{ 
	var a=2; 
}

但link就会认为这样语法不规范，它就会在控制台用黄色的字告诉你不能把同一个变量var两次，所以你就要改成这样：

var a;
if(this.init){
	a=1;
else{
	a=2;
}

4.outputDir——build打包输出目录

outputDir:"dist",

就是打包的目录名，默认为dist

5.assetsDir——静态文件输出目录，基于dist

assetsDir:"assets",

可以看到我们开发目录src下的所有静态资源文件在打包后全部都集中在assets文件夹中了，这里补充一下，图片中assets目录下面的static目录是开发目录public目录下的静态资源文件，public目录下的文件打包时文件名不会重新生成哈希值。

6.indexPath——打包生成的html文件名

indexPath: "index.html",

7.productionSourceMap——取消.map文件的打包

productionSourceMap: false,

建议配置此项，.map文件没有什么作用，这里配置为false，可以加快打包速度

8.configureWebpack: (config) => { return {…} }——在…中配置webpack配置项，相当于webpack.config.js

configureWebpack: (config) => {
  if (process.env.NODE_ENV !== 'production') return;	// 加快开发环境打包速度
  config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;	//生产环境去掉console.log
  return {  // 此处配置webpack.config.js的相关配置
    plugins: [],
    performance: {}
  };
}

在vue-cli项目中webpack.config.js文件是无效的，但是可以在vue.config.js中的configureWebpack中进行webpack配置，下面展示一下我配置过的一个项目

这里就是加了一个webpack插件，大家可以根据自己项目需求来配置webpack

发布时间：2020年8月5日
作者：web_star