Vue CLI的配置与优化技巧
一、Vue CLI 基础配置
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它为项目提供了基础的配置，使开发者能够专注于业务逻辑的实现。在项目创建时，Vue CLI 会生成一系列的配置文件，其中最主要的是 vue.config.js 文件。
1.1 项目创建与默认配置
当我们使用 vue create 命令创建一个新的 Vue 项目时，Vue CLI 会根据我们选择的特性生成相应的项目结构和配置。例如，选择默认的 babel、eslint 配置后，项目中会包含对应的配置文件：.babelrc（或 babel.config.js）以及 .eslintrc.js 等。
vue create my - project
上述命令会引导我们完成项目的创建过程，期间可以选择不同的预设配置或者手动选择特性。
1.2 理解 vue.config.js
vue.config.js 是 Vue CLI 项目的核心配置文件，它可以用来调整项目的各种设置。如果项目根目录下不存在此文件，Vue CLI 会使用默认配置。
以下是一个简单的 vue.config.js 示例：
module.exports = {
// 基本路径
publicPath: '/',
// 输出文件目录
outputDir: 'dist',
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir: 'assets',
// 是否在构建生产包时生成 sourceMap 文件
productionSourceMap: false,
// webpack 配置
chainWebpack: config => {
// 在这里对 webpack 配置进行更细粒度的修改
},
configureWebpack: {
// 直接修改 webpack 的配置
}
}
二、Vue CLI 中 publicPath 的配置与影响
publicPath 决定了应用在部署时的基本路径。它在开发和生产环境中有不同的作用，正确配置 publicPath 对于项目的正常运行至关重要。
2.1 开发环境中的 publicPath
在开发环境下，publicPath 默认为 '/'，这意味着开发服务器会从根路径提供静态资源。例如，当我们在组件中引入一个图片：
<template>
<div>
<img src="/logo.png" alt="logo">
</div>
</template>
开发服务器会从根路径查找 logo.png 文件。
如果我们将 publicPath 修改为 '/my - app/'，那么上述图片路径需要相应地修改为 src="/my - app/logo.png"，否则图片将无法正确显示。
2.2 生产环境中的 publicPath
在生产环境中，publicPath 的配置直接影响到静态资源的引用路径。如果我们的项目部署在服务器的非根路径下，比如 https://example.com/my - app/，那么需要将 publicPath 设置为 '/my - app/'。
在构建项目时，Vue CLI 会根据 publicPath 的值来修改 HTML 文件中静态资源的引用路径。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<link href="/my - app/css/app.123456.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="/my - app/js/app.123456.js"></script>
</body>
</html>
这样，当用户访问 https://example.com/my - app/ 时，浏览器能够正确加载到相应的静态资源。
三、优化 outputDir 和 assetsDir
outputDir 和 assetsDir 分别决定了构建输出目录和静态资源存放目录，合理配置这两个选项可以优化项目的部署和资源管理。
3.1 outputDir 的配置与优化
outputDir 默认为 'dist'，即构建后的项目文件会输出到项目根目录下的 dist 文件夹中。在实际项目中，我们可能需要根据服务器的部署要求来调整这个目录。
例如，如果服务器要求将项目部署在特定的子目录下，我们可以将 outputDir 设置为该子目录路径：
module.exports = {
outputDir: 'docs'
}
这样，构建后的文件会输出到 docs 目录中，方便部署到服务器指定位置。
3.2 assetsDir 的配置与优化
assetsDir 用于指定放置生成的静态资源（如 js、css、img、fonts）的目录，它是相对于 outputDir 的。默认情况下，静态资源会直接放在 outputDir 根目录下。
如果我们希望将静态资源分类存放，比如将所有图片放在 outputDir/assets/images 目录下，可以这样配置：
module.exports = {
assetsDir: 'assets/images'
}
在组件中引用图片时，路径也需要相应调整：
<template>
<div>
<img src="/assets/images/logo.png" alt="logo">
</div>
</template>
这样的配置可以使项目的静态资源结构更加清晰，便于管理和维护。
四、productionSourceMap 的权衡
productionSourceMap 用于控制是否在构建生产包时生成 sourceMap 文件。sourceMap 是一种将编译后的代码映射回原始源代码的文件，它在调试生产环境代码时非常有用，但也会增加构建包的大小。
4.1 开启 productionSourceMap 的好处
当项目在生产环境中出现问题时，开启 productionSourceMap 可以帮助开发者快速定位到原始代码中的错误位置。例如，在浏览器的开发者工具中，错误堆栈信息会显示原始代码的行号和文件名，而不是编译后的代码。
假设我们在生产环境中遇到一个 JavaScript 错误，开启 sourceMap 后，错误堆栈可能如下：
Uncaught TypeError: Cannot read property 'name' of undefined
at src/components/User.vue:10:20
这样我们可以直接定位到 User.vue 文件的第 10 行，快速排查问题。
4.2 关闭 productionSourceMap 的原因
虽然 sourceMap 对调试有很大帮助，但它也会带来一些负面影响。首先，生成 sourceMap 文件会增加构建时间，因为需要额外的处理过程。其次，sourceMap 文件包含了原始代码的信息，可能存在一定的安全风险，尤其是在项目包含敏感信息的情况下。此外，sourceMap 文件会增加构建包的大小，影响项目的加载速度。
在大多数情况下，如果项目已经经过充分的测试，并且对性能和安全性有较高要求，可以考虑关闭 productionSourceMap：
module.exports = {
productionSourceMap: false
}
五、深入 webpack 配置
Vue CLI 基于 webpack 进行项目构建，通过 chainWebpack 和 configureWebpack 选项，我们可以深入修改 webpack 的配置，以满足项目的特定需求。
5.1 chainWebpack
chainWebpack 提供了一种链式调用的方式来修改 webpack 的配置，它允许我们对 webpack 的配置进行更细粒度的控制。
例如，我们想要修改图片加载器的配置，限制图片的最大加载大小为 10KB，可以这样写：
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|webp)$/)
.use('url - loader')
.tap(options => {
options.limit = 10 * 1024;
return options;
});
}
}
在上述代码中，我们通过 config.module.rule('images') 选中了图片加载器的配置规则，然后使用 use('url - loader') 选中 url - loader，并通过 tap 方法修改了 url - loader 的 limit 选项。
5.2 configureWebpack
configureWebpack 则是直接修改 webpack 的配置对象。例如，我们想要添加一个自定义的插件，可以这样做：
const BundleAnalyzerPlugin = require('webpack - bundle - analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
上述代码引入了 webpack - bundle - analyzer 插件，并将其添加到 webpack 的插件列表中。这个插件可以帮助我们分析构建包的大小，找出体积较大的模块，从而进行优化。
六、优化构建性能
在实际项目开发中，优化构建性能可以显著提高开发效率和项目的部署速度。以下是一些基于 Vue CLI 的构建性能优化技巧。
6.1 代码分割
Vue CLI 支持代码分割，通过 splitChunks 配置可以将公共代码提取出来，避免重复打包。
在 vue.config.js 中，可以这样配置：
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
}
上述配置会将所有模块中的公共代码提取出来，生成单独的文件。这样在多个页面或组件中使用相同的库时，这些库只会被打包一次，从而减小了包的体积，提高了加载速度。
6.2 开启并行构建
webpack 支持并行构建，通过 thread - loader 可以开启多线程构建，提高构建速度。
首先安装 thread - loader：
npm install thread - loader - - save - dev
然后在 vue.config.js 中配置：
module.exports = {
chainWebpack: config => {
config.module
.rule('js')
.use('thread - loader')
.loader('thread - loader')
.options({
workers: require('os').cpus().length - 1
});
}
}
上述代码为 JavaScript 模块添加了 thread - loader，并根据 CPU 核心数设置了工作线程数（一般设置为 CPU 核心数减 1，避免占用过多系统资源）。这样在构建过程中，JavaScript 模块的编译会在多个线程中并行执行，加快构建速度。
6.3 优化 CSS 加载
在 Vue CLI 项目中，可以通过 OptimizeCSSAssetsPlugin 来优化 CSS 资源。该插件会在构建过程中压缩 CSS 文件，去除不必要的空格和注释等。
首先安装 OptimizeCSSAssetsPlugin：
npm install optimize - css - assets - plugin - - save - dev
然后在 vue.config.js 中配置：
const OptimizeCSSAssetsPlugin = require('optimize - css - assets - plugin');
module.exports = {
configureWebpack: {
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({})
]
}
}
}
上述配置将 OptimizeCSSAssetsPlugin 添加到了 webpack 的优化器列表中，在构建时会对 CSS 文件进行优化，减小文件体积。
七、优化开发体验
除了优化构建性能，优化开发体验也是 Vue CLI 配置的重要方面。良好的开发体验可以提高开发效率，减少错误发生的概率。
7.1 配置 ESLint
ESLint 是一个常用的 JavaScript 代码检查工具，Vue CLI 在项目创建时可以选择集成 ESLint。通过合理配置 ESLint，可以保证项目代码风格的一致性，提高代码质量。
在 .eslintrc.js 文件中，可以根据项目需求调整规则。例如，想要禁止使用 console.log，可以这样配置：
module.exports = {
rules: {
'no - console': 'error'
}
}
这样，当代码中出现 console.log 时，ESLint 会报错，提醒开发者修正代码。
7.2 配置热更新
热更新（HMR，Hot Module Replacement）是 Vue CLI 开发服务器的一个重要特性，它允许在不刷新页面的情况下更新修改后的模块，大大提高了开发效率。
默认情况下，Vue CLI 已经开启了热更新功能。但在某些情况下，比如自定义了 webpack 配置后，可能会影响热更新的正常工作。此时需要确保 webpack 的配置没有破坏 HMR 的相关设置。
例如，在 chainWebpack 中配置时，要注意不要移除或修改与 HMR 相关的插件：
module.exports = {
chainWebpack: config => {
// 正确的做法，不影响 HMR
config.module
.rule('js')
.use('babel - loader')
.loader('babel - loader');
}
}
如果错误地移除了 webpack - hot - middleware 等与 HMR 相关的插件，热更新功能将会失效。
7.3 自定义开发服务器代理
在开发过程中，我们经常会遇到前端项目与后端 API 服务器跨域的问题。Vue CLI 提供了开发服务器代理功能，可以方便地解决这个问题。
在 vue.config.js 中，可以这样配置代理：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
上述配置表示，当请求的 URL 以 /api 开头时，会将请求代理到 http://localhost:3000，并且去除 URL 中的 /api 前缀。这样在前端代码中，可以像请求本地接口一样请求后端 API，避免了跨域问题。
八、部署优化
项目开发完成后，部署优化对于项目的性能和用户体验至关重要。Vue CLI 提供了一些配置选项来帮助我们优化项目的部署。
8.1 压缩代码
在生产环境中，压缩代码可以显著减小文件体积，提高加载速度。Vue CLI 在构建过程中默认会对 JavaScript 和 CSS 文件进行压缩。
对于 HTML 文件，也可以通过插件进行压缩。例如，使用 html - webpack - plugin 插件的压缩选项：
const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin({
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
}
})
]
}
}
上述配置会在构建时压缩 HTML 文件，去除注释、空白字符和属性引号等，减小 HTML 文件的大小。
8.2 缓存控制
合理设置缓存可以提高用户再次访问项目时的加载速度。在服务器端，可以通过设置 HTTP 缓存头来控制静态资源的缓存。
在 Vue CLI 项目中，可以通过在 vue.config.js 中配置 chainWebpack 来添加自定义的 HTTP 头：
module.exports = {
chainWebpack: config => {
config.plugin('html')
.tap(args => {
args[0].headers = {
'Cache - Control': 'public, max - age = 31536000'
};
return args;
});
}
}
上述代码为 HTML 文件添加了 Cache - Control 头，设置缓存有效期为一年（31536000 秒）。这样，当用户再次访问项目时，如果文件没有变化，浏览器可以直接从缓存中加载，提高加载速度。
8.3 代码预加载与预渲染
代码预加载（Preloading）和预渲染（Prerendering）可以进一步优化项目的加载性能。
预加载可以通过在 HTML 中添加 <link rel="preload"> 标签来实现，告诉浏览器提前加载某些资源，提高后续资源的加载速度。
在 Vue CLI 项目中，可以通过 chainWebpack 配置来添加预加载：
module.exports = {
chainWebpack: config => {
config.plugin('preload')
.tap(() => [
{
rel: 'preload',
include: 'initial',
fileBlacklist: [
/\.map$/,
/hot - update\.js$/
],
// 这里可以根据项目需求进一步调整预加载的资源类型和条件
}
]);
}
}
预渲染则是在构建时生成 HTML 页面，在用户请求时直接返回已经渲染好的页面，提高首屏加载速度。Vue CLI 可以通过 vue - cli - plugin - prerender - spa 插件来实现预渲染功能。
首先安装插件：
npm install vue - cli - plugin - prerender - spa - - save - dev
然后在项目中配置：
module.exports = {
pluginOptions: {
prerenderSpa: {
registry: undefined,
renderRoutes: [
'/',
'/about'
],
useRenderEvent: true,
headless: true,
postProcess(renderedRoute) {
renderedRoute.html = renderedRoute.html
.replace('<!--vue - ssr - preload - state-->', '')
.replace('<!--vue - ssr - state-->', '');
return renderedRoute;
}
}
}
}
上述配置表示对首页和关于页面进行预渲染，并在渲染后对生成的 HTML 进行一些处理，去除不必要的注释。
九、多环境配置
在实际项目开发中，我们通常需要针对不同的环境（如开发环境、测试环境、生产环境）进行不同的配置。Vue CLI 支持多环境配置，通过在项目根目录下创建不同的环境文件来实现。
9.1 环境文件的命名规则
Vue CLI 使用 dotenv 加载环境变量，环境文件的命名规则如下：
.env：所有环境共用的配置。.env.development：开发环境配置。.env.test：测试环境配置。.env.production：生产环境配置。
例如，在 .env.development 文件中可以设置开发环境的 API 地址：
VUE_APP_API_URL = http://localhost:3000/api
在 .env.production 文件中设置生产环境的 API 地址：
VUE_APP_API_URL = https://example.com/api
9.2 在项目中使用环境变量
在 Vue CLI 项目中，可以通过 process.env 来访问环境变量。例如，在组件中根据不同环境加载不同的 API 地址：
<template>
<div>
<p>API URL: {{ apiUrl }}</p>
</div>
</template>
<script>
export default {
data() {
return {
apiUrl: process.env.VUE_APP_API_URL
};
}
};
</script>
这样，在不同的环境下，apiUrl 会根据相应环境文件中的配置进行取值，实现了多环境配置的灵活应用。
9.3 自定义环境文件
除了默认的环境文件，我们还可以根据项目需求自定义环境文件。例如，创建一个 .env.staging 文件用于预发布环境配置。
首先在 package.json 中添加自定义脚本：
{
"scripts": {
"serve:staging": "vue - cli - service serve --mode staging",
"build:staging": "vue - cli - service build --mode staging"
}
}
然后在 .env.staging 文件中设置预发布环境的相关配置，如 API 地址等：
VUE_APP_API_URL = https://staging.example.com/api
通过上述配置，我们可以使用 npm run serve:staging 或 npm run build:staging 来基于预发布环境配置启动开发服务器或进行构建。
十、Vue CLI 插件的使用与配置
Vue CLI 插件是扩展项目功能的重要方式，通过安装和配置插件，可以为项目添加各种特性，如路由、状态管理、代码检查等。
10.1 安装插件
Vue CLI 插件可以通过 vue add 命令进行安装。例如，安装 Vue Router 插件：
vue add router
安装过程中，插件会引导我们进行一些基本配置，如选择路由模式（Hash 模式或 History 模式）等。
10.2 配置插件
不同的插件有不同的配置方式，一般会在项目的配置文件（如 vue.config.js 或插件自身的配置文件）中进行配置。
以 Vuex 插件为例，安装后会在项目中生成 store 目录和相关文件。在 store/index.js 文件中可以配置状态、mutations、actions 等：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
}
});
这样就配置好了一个简单的 Vuex 状态管理模块，在组件中可以通过 this.$store 来访问和修改状态。
10.3 自定义插件
除了使用官方和社区提供的插件，我们还可以根据项目需求自定义插件。自定义插件可以是一个函数，接收 vue - cli - service 实例作为参数，并对其进行扩展。
例如，我们想要创建一个自定义插件来在构建完成后输出一些自定义信息，可以这样写：
// my - plugin.js
module.exports = function (api) {
api.hooks.afterBuild.tap('MyPlugin', () => {
console.log('Build completed successfully!');
});
};
然后在 vue.config.js 中使用自定义插件：
module.exports = {
configureWebpack: {
plugins: [
require('./my - plugin.js')
]
}
}
这样在每次构建完成后，控制台会输出 Build completed successfully! 的信息。
通过以上对 Vue CLI 的配置与优化技巧的详细介绍，希望能帮助开发者更好地利用 Vue CLI 来构建高性能、可维护的前端项目。无论是基础配置的调整，还是深入的 webpack 配置优化，亦或是开发体验和部署优化等方面，都需要根据项目的具体需求进行合理的设置和调整。在实际开发过程中，不断积累经验，灵活运用这些技巧，将有助于提高项目的质量和开发效率。