vue项目上线

### Vue 项目上线部署配置教程 #### 一、前端项目的准备工作 在将 Vue 项目部署到生产环境中之前，需要完成一系列的前置工作。以下是详细的步骤： 1. **配置反向代理解决跨域问题** 需要在 `vue.config.js` 文件中设置开发服务器的代理规则，以便解决前后端分离时可能存在的跨域请求问题。通过定义 `/api` 或其他自定义路径作为代理前缀，可以将前端请求转发至后端服务[^2]。 ```javascript const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ transpileDependencies: true, devServer: { proxy: { "/api": { target: "http://backend-server-url", // 替换为实际的后端 URL 地址 changeOrigin: true, // 允许跨域请求 }, }, }, }); ``` 2. **调整路由模式** 如果使用的是 `history` 模式的路由，在生产环境下可能会导致页面刷新时报错。因此建议切换为 `hash` 模式，并指定基础路径以匹配 Nginx 的静态资源映射规则[^3]。 ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ mode: 'hash', base: '/usr/local/blog/client/dist/', // 生产环境的基础路径 routes: [ // 定义路由规则... ], }); ``` --- #### 二、构建与打包 为了优化性能并减少体积，需对 Vue 项目进行构建和压缩操作。 1. **运行构建命令** 使用以下命令生成用于生产的静态文件： ```bash npm run build ``` 构建完成后会在项目根目录下生成一个名为 `dist` 的文件夹，其中包含了所有的静态资源文件（HTML、CSS 和 JavaScript）以及图片等资产文件。 2. **上传静态资源** 将 `dist` 文件夹中的内容复制到目标服务器上的指定位置，例如 `/usr/local/webserve/static/` 目录下[^4]。 --- #### 三、Nginx 配置 为了让用户能够访问已部署的应用程序，还需要正确配置 Web 服务器（如 Nginx），使其能加载这些静态文件并将 API 请求重定向给后端服务。 1. **安装 Nginx** 在 CentOS 系统上可以通过如下方式快速安装 Nginx[^4]: ```bash sudo yum install epel-release -y sudo yum install nginx -y systemctl start nginx systemctl enable nginx ``` 2. **编辑 Nginx 配置文件** 修改默认站点配置文件（通常位于 `/etc/nginx/conf.d/default.conf` 或者创建一个新的 `.conf` 文件），添加类似下面的内容来支持 Vue 应用: ```nginx server { listen 80; server_name your-domain.com; root /usr/local/webserve/static; # 设置静态资源路径 index index.html; location / { try_files $uri /index.html; # 支持单页应用 (SPA) } location /api/ { proxy_pass http://backend-server-url/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; } } ``` 此处需要注意两点：一是确保 `root` 参数指向了正确的静态文件存储位置；二是对于涉及后端接口调用的部分应单独设立代理规则[^3][^4]。 3. **重启 Nginx** 更改完毕之后记得重新启动 Nginx 来使新设定生效： ```bash systemctl restart nginx ``` --- #### 四、测试与验证 最后一步就是确认整个流程无误——打开浏览器输入域名地址查看首页是否正常显示，尝试点击链接跳转不同页面以及提交表单等功能交互行为均按预期运作即可认为成功完成了部署过程。 ---