Vue-cli配置

在利用vue-cli进行项目配置时，可以利用vue.config.js进行一系列的相关配置，其中对于webpack的一系列配置也可以在此文件中进行。这个文件初始是并不存在于目录当中，需要我们自己进行手动的生成。根目录下的文件生成目录如下：

在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文件的打包，加快打包速度
    chainWebpack: (config) => {
        // process.env为环境变量，分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度
        const svgRule = config.module.rule('svg');
        svgRule.uses.clear();
        svgRule
            .use('babel-loader')
            .loader('babel-loader')
            .end()
            .use('vue-svg-loader')
            .loader('vue-svg-loader');
    }
};

1.publicPath——公共路径配置项，默认为"/"，此配置项是影响打包生成文件的引入资源公共路径的
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语法检测
这里配置为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文件名
7.productionSourceMap——取消.map文件的打包
建议配置此项，.map文件没有什么作用，这里配置为false，可以加快打包速度

8.chainWebpack函数中配置webpack配置项，相当于webpack.config.js
在vue-cli项目中webpack.config.js文件是无效的，但是可以在vue.config.js中的configureWebpack中进行webpack配置，下面代码是配置了svg的加载

参考链接：https://blog.csdn.net/qq_40279656/article/details/107805720