vue3本地部署和nginx部署操作与区别

啊买依拿
762 阅读6分钟

vue3+vite 进行本地部署

方法 1：使用 Vite 的预览功能

Vite 提供了一个 preview 命令，用于预览构建结果：

npm run build
npm run preview

默认情况下，预览服务器会运行在 http://localhost:4173

方法 2：使用静态文件服务器

安装一个静态文件服务器（如 serve 或 http-server），然后运行：

npm install -g serve
serve -s dist

配置本地部署

如果需要自定义本地部署的配置，可以修改 vite.config.js 文件。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000, // 自定义开发服务器端口
    open: true, // 启动后自动打开浏览器
  },
  build: {
    outDir: 'dist', // 自定义输出目录
  },
});

解决本地部署中的常见问题

问题 1：路由刷新后 404

如果使用 Vue Router 的 history 模式，在本地测试构建结果时，刷新页面可能会导致 404 错误。这是因为服务器未正确配置。

解决方法：

  • 在本地测试时，使用 serve 的 -s 参数：
serve -s dist
问题 2：静态资源路径错误

如果静态资源（如图片、CSS、JS 文件）加载失败，可能是路径配置问题。

解决方法：

  • 在 vite.config.js 中配置 base：
export default defineConfig({
  base: '/my-app/', // 如果部署在子路径下
});
  • 确保静态资源使用正确的路径
<img src="/src/assets/logo.png" alt="Logo">

Vue 3 + Vite 进行 Nginx 部署

1. 构建生产环境代码

在部署之前，首先需要将 Vue 3 + Vite 项目构建为生产环境代码。

运行以下命令：

npm run build
2. 下载Nginx
3. 配置 Nginx

将构建好的 dist 目录中的文件部署到 Nginx 的静态资源目录，并配置 Nginx 以正确服务这些文件。

步骤：

  1. 将 dist 目录中的全部文件复制到 Nginx 的默认静态资源目录（例如 /nginx/html/）：

  2. 编辑 Nginx 配置文件（通常位于 /nginx/conf/nginx.conf)

  3. 修改配置文件，确保 Nginx 正确服务 Vue 项目：

server {
    listen 80;
    server_name your_domain.com; # 替换为你的域名或 IP 地址

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html; # 支持 Vue Router 的 history 模式
    }

    # 如果需要配置 API 代理
    location /api/ {
        proxy_pass http://backend_server; # 替换为你的后端 API 地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
  1. 保存并退出编辑器。
4. 访问部署的项目

在浏览器中访问你的域名或服务器 IP 地址（例如 http://your_domain.com 或 http://your_server_ip 或 http://localhost:80），即可查看部署的 Vue 项目。

解决常见问题

问题 1：路由刷新后 404

如果使用 Vue Router 的 history 模式，刷新页面可能会导致 404 错误。

解决方法：
在 Nginx 配置中添加以下规则：

location / {
    try_files $uri $uri/ /index.html;
}
问题 2：静态资源加载失败

如果静态资源（如图片、CSS、JS 文件）加载失败，可能是路径配置问题。

解决方法：

  • 确保 vite.config.js 中的 base 配置正确：
export default defineConfig({
  base: '/', // 如果部署在根路径
});
  • 如果部署在子路径（如 /my-app/），修改 base：
export default defineConfig({
  base: '/my-app/',
});

并在 Nginx 中配置：

location /my-app/ {
    alias /usr/share/nginx/html/;
    try_files $uri $uri/ /my-app/index.html;
}
问题 3：Nginx 权限问题

如果 Nginx 无法访问静态文件，可能是权限问题。

解决方法：
确保 Nginx 用户（通常是 www-data 或 nginx）有权限访问文件：

sudo chown -R www-data:www-data /usr/share/nginx/html
sudo chmod -R 755 /usr/share/nginx/html

 配置 HTTPS（可选）

如果需要通过 HTTPS 访问项目，可以使用 Let's Encrypt 免费证书。

安装 Certbot
sudo apt install certbot python3-certbot-nginx
获取证书
sudo certbot --nginx -d your_domain.com
自动续期

Certbot 会自动配置续期任务，无需手动操作。

有了本地调试为什么还要本地部署

1. 本地调试

本地调试 是指在开发环境中运行项目，通常使用开发服务器（如 Vite 或 Webpack Dev Server）来实时查看代码更改的效果。

特点：

  • 实时热更新：代码修改后，页面会自动刷新。
  • 开发工具支持：集成了调试工具（如 Vue Devtools）、错误提示和 Source Map。
  • 快速启动：开发服务器启动速度快，适合频繁修改和调试。

2. 本地部署

本地部署 是指将项目构建为生产环境代码，并在本地模拟生产环境运行。

特点：

  • 生产环境构建：代码会被压缩、优化，并移除开发环境的调试工具。
  • 静态文件服务：使用静态文件服务器（如 serve 或 Nginx）来模拟生产环境的运行方式。
  • 性能测试：可以测试生产环境下的性能表现。

使用场景：

  • 验证生产环境构建是否正常。
  • 测试路由、静态资源路径等在生产环境中的表现。
  • 模拟生产环境的性能和行为。

总结

  • 本地调试 用于开发和调试阶段，适合快速验证功能和修复问题。
  • 本地部署 用于模拟生产环境，验证构建结果、测试性能和兼容性。

本地部署和nginx部署的区别

1. 定义

  • 本地部署：在开发者的本地机器上运行 Vue 项目的生产环境构建结果，通常使用静态文件服务器（如 serve 或 http-server）来模拟生产环境。
  • Nginx 部署：将 Vue 项目部署到远程服务器上，并使用 Nginx 作为 Web 服务器来提供静态文件服务和反向代理。

2. 环境

  • 本地部署：

    • 运行在开发者的本地机器上。
    • 使用本地静态文件服务器（如 serve 或 http-server）。
    • 主要用于测试和验证生产环境构建结果。

  • Nginx 部署：

    • 运行在远程服务器上。
    • 使用 Nginx 作为高性能的 Web 服务器。
    • 用于正式的生产环境，支持高并发和负载均衡。

3. 目的

  • 本地部署：

    • 验证生产环境构建是否正常。
    • 测试路由、静态资源路径等在生产环境中的表现。
    • 模拟生产环境的性能和行为。

  • Nginx 部署：

    • 提供正式的生产环境服务。
    • 支持高并发访问和负载均衡。
    • 提供 HTTPS、缓存等高级功能。

4. 配置

  • 本地部署：

    • 配置简单，通常只需运行一个静态文件服务器。

  • Nginx 部署：

    • 需要配置 Nginx 服务器，包括静态文件路径、反向代理、HTTPS 等。

5. 性能

  • 本地部署：

    • 性能较低，适合本地测试，不适合高并发场景。
    • 使用简单的静态文件服务器，没有优化。

  • Nginx 部署：

    • 性能高，经过优化，能够处理大量并发请求。
    • 支持缓存、负载均衡等高级功能。

6. 安全性

  • 本地部署：

    • 安全性较低，通常仅在本地运行，不对外开放。
    • 没有 HTTPS 等安全措施。

  • Nginx 部署：

    • 安全性高，支持 HTTPS、访问控制等安全措施。
    • 适合对外提供服务。

7. 访问方式

  • 本地部署：

    • 通过 localhost 或 127.0.0.1 访问，通常仅限于本地。
    • 示例：http://localhost:5000

  • Nginx 部署：

    • 通过域名或 IP 地址访问，可供外部用户使用。
    • 示例：http://your_domain.com

8. 适用场景

  • 本地部署：

    • 开发者在本地测试生产环境构建结果。
    • 验证路由、静态资源路径等是否正确。
    • 模拟生产环境的性能和行为。

  • Nginx 部署：

    • 正式的生产环境部署。
    • 提供对外服务，支持高并发访问。
    • 需要 HTTPS、缓存等高级功能。

总结

特性本地部署Nginx 部署
环境本地机器远程服务器
目的测试生产环境构建结果正式生产环境服务
配置简单，使用静态文件服务器复杂，需要配置 Nginx
性能较低，适合本地测试高，支持高并发和负载均衡
安全性较低，仅限于本地访问高，支持 HTTPS 和访问控制
访问方式localhost 或 127.0.0.1域名或 IP 地址
适用场景本地测试和验证正式生产环境部署
avatar
文章
阅读
粉丝