Vue3 部署，从基础到实践的全面指南

terry 4小时前阅读数 9 #Vue

文章标签 Vue3 部署

什么是 Vue3 部署？

Vue3 部署是将开发好的 Vue3 应用程序发布到生产环境中，使其能够被用户访问和使用的过程，它涉及到多个方面，包括构建优化、服务器配置、性能监控等。

Vue3 部署前需要做哪些准备？

在进行 Vue3 部署之前，首先要确保代码已经完成了开发和测试，没有明显的 bug，要对项目进行构建优化，比如使用 Vue CLI 或 Vite 等工具进行打包，压缩代码、分离 CSS 和 JavaScript 文件等，以减小文件体积，提高加载速度，要准备好合适的服务器环境，根据项目需求选择云服务器（如阿里云、腾讯云等）或本地服务器，并安装好必要的软件（如 Node.js、Nginx 等）。

如何进行 Vue3 项目的构建？

如果使用 Vue CLI，在项目根目录下运行npm run build命令，它会根据配置文件（如vue.config.js）进行构建，可以在配置文件中设置 publicPath（部署的基础路径）、outputDir（输出目录）等参数。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'? '/my-app/' : '/',
  outputDir: 'dist'
}

如果使用 Vite，运行npm run build，Vite 会自动进行代码优化和打包，Vite 在开发阶段就具有快速的热更新等优势,构建后的代码也经过了良好的优化。

服务器端如何配置来部署 Vue3 应用？

Nginx 服务器配置

以 Nginx 为例，在 Nginx 的配置文件（一般在/etc/nginx/conf.d/目录下新建一个配置文件，如my-vue-app.conf）中进行如下配置：

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名
    root /path/to/your/dist;  # 替换为构建后的 dist 目录路径
    location / {
        try_files $uri $uri/ /index.html;
    }
    location /api {  # 如果有后端 API 代理
        proxy_pass http://backend-server;  # 替换为后端服务器地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

这样配置后，当用户访问域名时，Nginx 会将请求指向 Vue3 应用的构建目录，并且处理好路由和可能的 API 代理。

Node.js 服务器配置（如果使用 Node.js 服务器）

如果项目是基于 Node.js 服务器（如 Express），可以使用express.static中间件来托管静态文件。

const express = require('express');
const app = express();
const path = require('path');
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

部署后的性能监控和优化

性能监控工具

可以使用 Google 的 Lighthouse（浏览器插件或命令行工具）来检测页面性能，它会从多个维度（如加载速度、可访问性、最佳实践等）给出评分和优化建议，它可能会提示图片未压缩、代码未进行 Tree - shaking 等问题。

优化策略

图片优化：使用工具（如 ImageOptim）压缩图片，或者采用 WebP 格式（现代浏览器支持较好，文件体积更小）。
代码分割：在 Vue3 中，利用动态导入（import()）进行代码分割，将不同路由或功能模块的代码拆分成多个文件，实现按需加载。
```
const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');
```
缓存策略：合理设置 HTTP 缓存头，对于不常变化的静态资源（如 CSS、JS 文件）设置较长的缓存时间，而对于经常变化的资源（如 API 响应）设置较短的缓存时间或不缓存，在 Nginx 中可以通过expires指令设置：
```
location ~* \.(css|js|jpg|png)$ {
  expires 7d;
}
```
常见问题及解决方法

路由问题

Vue3 应用使用了前端路由（如 Vue Router），在服务器端配置不正确时，直接访问非根路径（如your-domain.com/about）可能会出现 404 错误，解决方法就是像前面 Nginx 配置中那样，使用try_files $uri $uri/ /index.html，让服务器始终返回index.html,然后由前端路由来处理页面渲染。

跨域问题

当 Vue3 应用调用后端 API 时，API 服务器和应用服务器不在同一个域名下，会出现跨域问题，解决方法可以是在后端服务器设置 CORS（跨域资源共享），或者像前面 Nginx 配置中那样进行 API 代理。