Vue-cli 是 Vue.js 官方提供的脚手架工具，可帮助开发者快速搭建 Vue 项目。在 2018 年 8 月，Vue-cli 更新了 3.0 版本，主要在构建和配置方面进行了重构和优化，提供了更加便捷、强大的开发体验。本文将介绍如何使用 Vue-cli 3.0 构建 SPA 应用，并探讨一些优化方案。
安装 Vue-cli 3.0
安装 Vue-cli 3.0 非常简单，只需执行以下命令即可：
npm install -g @vue/cli
安装完成后，你可以在命令行中输入 vue 命令来检查安装是否成功。
创建项目
使用 Vue-cli 3.0 创建项目非常方便，只需进入一个空文件夹，执行以下命令：
vue create my-project
其中，my-project 是项目的名称，你可以根据自己的喜好自行修改。
此时，Vue-cli 会自动为你创建一个项目，并生成一些默认配置。你可以简单地使用以下命令启动项目：
cd my-project npm run serve
然后在浏览器中访问 http://localhost:8080，即可看到一个 Vue 应用。
配置项目
配置环境变量
在项目开发和部署中，我们可能需要根据不同环境（如开发、测试、生产）配置不同的变量。Vue-cli 3.0 为此提供了非常方便的解决方案。
在项目的根目录下，创建 .env 文件并添加如下内容：
VUE_APP_API_BASE_URL=http://localhost:3000
上述文件中，VUE_APP_API_BASE_URL 是自定义的环境变量名，值为 API 服务的基础 URL，可以根据需要自行修改。在项目启动后，此变量将被注入到所有的 Vue 组件中，通过 process.env.VUE_APP_API_BASE_URL 访问。
同时，Vue-cli 3.0 还支持在 .env 文件中添加不同环境的变量配置，如 .env.development、.env.production 等。在启动不同环境时，Vue-cli 会自动加载对应的配置文件。
配置代理
在开发过程中，我们经常需要使用 API 服务。但是，如果 API 服务不支持跨域访问，我们就无法在本地调试。Vue-cli 3.0 也提供了关于代理的解决方案，可以轻松解决这个问题。
在项目的根目录下，打开 vue.config.js 文件，并添加如下代码：
// www.javascriptcn.com code example
module.exports = {
devServer: {
proxy: {
'/api': {
target: process.env.VUE_APP_API_BASE_URL,
changeOrigin: true
}
}
}
}上述代码的含义是，对于所有以 /api 开头的请求，Vue-cli 将会代理到 process.env.VUE_APP_API_BASE_URL 所指定的 URL。
在组件中，只需使用 /api 开头的相对路径即可访问 API 服务，如：
fetch('/api/data')配置构建优化
Vue-cli 3.0 在构建方面进行了很多的优化，通过一些配置和插件的使用，可以进一步提升构建速度和性能。
配置代码分割（Code Splitting）
在应用中，不同的页面或功能往往会依赖不同的 JavaScript 文件。如果将所有 JavaScript 文件打包成一个文件，会导致页面加载缓慢，用户体验也会受到影响。Vue-cli 3.0 默认启用了代码分割功能，可以将应用中的 JavaScript 代码分割成多个文件，从而减少每个文件的体积，加快应用的加载速度。
如果你想对代码分割进行调整，可以编辑 vue.config.js 文件并添加如下代码：
module.exports = {
chainWebpack: config => {
config.optimization.splitChunks({
chunks: 'all',
name: false
})
}
}上述代码的含义是，对于所有的 JavaScript 文件，Vue-cli 将自动进行代码分割，生成多个文件。其中，chunks 参数指定了将哪些 JavaScript 文件进行分割，这里使用的是 all；name 参数指定了生成的文件名的格式，这里使用的是默认值，即 [name].js。
使用 Gzip 压缩
在服务器向客户端返回文件时，可以启用 Gzip 压缩，将文件体积大幅缩减，加快传输速度。Vue-cli 3.0 默认启用了 Gzip 压缩，但需要在服务器端进行配置。
如果你使用的是 Node.js 服务器，在启动 Node.js 服务器时，可以添加以下代码启用 Gzip 压缩：
const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())如果你使用的是 Nginx 服务器，可以添加以下代码配置 Gzip 压缩：
gzip on; gzip_types text/plain text/css application/json application/javascript;
配置部署
在应用开发完成后，我们需要将应用部署到服务器上。Vue-cli 3.0 为部署提供了非常方便的解决方案。
生成静态文件
首先，你需要将应用编译成静态文件，以便可以通过 HTTP 服务器进行访问。
在项目的根目录下，执行以下命令：
npm run build
执行成功后，Vue-cli 3.0 将会在 dist 目录下生成编译后的静态文件。你可以通过 HTTP 服务器将 dist 目录下的文件部署到服务器上，从而让用户通过浏览器访问应用。
配置服务器
在部署应用时，需要在服务器上安装 HTTP 服务器，如 Apache、Nginx 等。在安装完 HTTP 服务器后，你需要将应用的静态文件复制到 HTTP 服务器的根目录下。
对于 Nginx 来说，你可以在 Nginx 配置文件中添加以下代码：
server {
listen 80;
server_name mydomain.com;
root /usr/local/nginx/html;
location / {
try_files $uri $uri/ /index.html;
}
}上述配置将会将所有的请求重定向到 /index.html，也就是我们编译出来的 Vue 应用的入口文件。
结语
本文介绍了如何使用 Vue-cli 3.0 构建 SPA 应用，并对构建和部署方面进行了一些优化。希望对你有所帮助。最后，附上一个完整的 vue.config.js 文件示例，供参考：
// www.javascriptcn.com code example
module.exports = {
// 配置环境变量
chainWebpack: config => {
config.plugin('define').tap(args => {
args[0]['process.env']['API_BASE_URL'] = JSON.stringify(process.env.VUE_APP_API_BASE_URL)
return args
})
},
// 配置代理
devServer: {
proxy: {
'/api': {
target: process.env.VUE_APP_API_BASE_URL,
changeOrigin: true
}
}
},
// 配置代码分割
chainWebpack: config => {
// 代码分割
config.optimization.splitChunks({
chunks: 'all',
name: false
})
// 图片压缩
config.module.rule('images').use('url-loader').loader('url-loader').tap(options => {
options.limit = 10240
return options
})
},
// 配置部署
productionSourceMap: false,
publicPath: '/my-app/',
outputDir: 'dist',
// 配置 Gzip 压缩
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.html$|\.json$|\.css$/,
threshold: 10240,
minRatio: 0.8
}))
}
}
}感谢阅读，如有错误、不当之处请指正。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ce5ef1e46428fe9e8897ba