为什么要配置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

Logo

前往低代码交流专区

更多推荐