网站 psd高平网站优化公司
目录
Build 打包
产生 dist 的静态文件夹
问题产生
✅前端目前最简单测试方法
✅ 其他测试的正确做法（4 选 1）
1. 本地起 HTTP 服务器（最简单通用）
2. Node 自带 http-server
3. 继续用 file:// 也行，但必须改 Vite 配置
一键测试脚本（可选）
删掉 所有 /usr/shara/nginx/html 文件先
把 dist 拷过去
先进下载的终端先
改 Nginx 配置（Vue Router history 模式）
后端解决跨域问题
示例（Node.js/Express）
前端代理（开发环境）
示例
使用第三方库
Nginx 代理（真神）
项目写的差不多了 就可以去进行项目打包
前端方便的话打 dist 部署在nginx, 后端Java 可以打 Jar/War 包部署在tomcat
以 Vue项目 为本次文章内容
Build 打包
Ctrl + ~ 调出控制终端，到控制台那边
npm run build
产生 dist 的静态文件夹
问题产生
这时候，很多小伙伴就开始迫不及待去双击 index.html ，那么 恭喜你，喜提一堆问题
浏览器禁止通过 file:// 协议 去加载本地磁盘上的 JS/CSS（CORS 策略）。你直接双击打开 dist/index.html 就会报错：
Access to script at 'file:///D:/assets/index-xxx.js' … has been blocked by CORS policy
所以“运行不起来”并不是打包失败，而是 方式不对。
✅前端目前最简单测试方法
1.就是控制台 node 装个 live-server
然后去到 dist 的目前去打开就好了
live-server --port=8888浏览器访问 http://localhost:8888 即可。
2.还一个就是用 vscode 软件
安装个 插件 - Live Server
在index.html中 右击打开
默认是 http://127.0.0.1:5501/index.html
✅ 其他测试的正确做法（4 选 1）
1. 本地起 HTTP 服务器（最简单通用）
# 全局装一次npm i -g serve# 在 dist 目录里serve dist
浏览器访问 http://localhost:8888 即可。
2. Node 自带 http-server
# 全局装一次npm i -g http-server# 在 dist 目录里http-server dist -p 8080
3. 继续用 file:// 也行，但必须改 Vite 配置
如果你 非要用双击打开，在 vite.config.ts 里加：
export default defineConfig({base: './', // 关键：相对路径})
然后重新 npm run build。⚠️ 注意：
-
这种方式仍可能被浏览器限制（尤其是 Chrome），推荐还是走 HTTP。
一键测试脚本（可选）
// package.json{"scripts": {"build": "vite build","preview": "vite preview" // 打包后本地预览}}
npm run buildnpm run preview # 自动起 http://localhost:4173
反正就是
-
不要双击
index.html。 -
用
serve、http-server或vite preview起 HTTP 服务。 -
如果非要 file://，务必把
base设为'./'并了解限制。
接着 进入正题，如何部署到nginx中呢？
环境介绍
因为是 部署在别人电脑的局域网 linux 龙芯虚拟机 中
所以先把静态项目压缩个包，无法直连虚拟机的，只能通过，利用微信传输助手去传到那边，然后解压吧
因为虚拟机那边没装 解压的，得安排一个先
yum install unrar
啊啊啊！！！龙怒！！
速速查找一下！！
有zip的 ，那就换一个 zip 就好了
传输过去
那么！！接下来，解压然后丢到nginx就完事了，待会细说
没安装过nginx的，安装一下
yum install nginxnginx 的配置文件可以去 运行状态 那边看到
systemctl status nginx
我看了一下配置文件，项目在 /usr/share/nginx/html 里面，只需要删了然后再丢进去就完事了，别怕！！！大不了把nginx删了，😃
开始操作！！！
1.把打包产物（dist 目录里的所有文件）放到 Nginx 的 Web 根目录。
删掉 所有 /usr/shara/nginx/html 文件先
rm -rf /usr/share/nginx/html/*删完后刷新一下就是这样了
把 dist 拷过去
先进下载的终端先
# 去用户的下载目录cd /home/devuser/下载
查看一下内容
ll
开始拷贝文件过去
cp -r dist/* /usr/share/nginx/html/刷新界面
然后 再用点 内网穿透技术 就出来了
如果你退出了然后返回的界面明明是可以的，但还是 404
2.让 Nginx 的站点配置能够正确地把 SPA 路由都回退到 index.html（否则刷新页面会 404）
改 Nginx 配置（Vue Router history 模式）
编辑站点配置文件
CentOS 在 /etc/nginx/nginx.conf/
location / {try_files $uri $uri/ /index.html;}
编辑完后检测+重启
sudo nginx -t # 检查语法sudo systemctl reload nginx
Vue SPA 刷新测试
不会出现这种问题了
解决跨域问题
后端解决跨域问题
后端可以通过设置 CORS（跨域资源共享）来允许前端应用的跨域请求。这是最推荐的方式，因为它将跨域问题的解决放在了数据的提供者（后端）端。
示例（Node.js/Express）
const express = require('express');const cors = require('cors');const app = express();app.use(cors());app.get('/data', (req, res) => {res.json({ message: 'Hello from server!' });});app.listen(3000, () => {console.log('Server is running on port 3000');});
前端代理（开发环境）
在开发环境中，可以使用 Vue CLI 提供的代理功能来解决跨域问题。通过在 vue.config.js 文件中配置代理，可以让前端请求通过代理服务器转发到目标服务器。
示例
// vue.config.jsmodule.exports = {devServer: {proxy: {'/api': {target: 'http://wmcode.com', // 目标服务器地址 或者 127.0.0.1:portchangeOrigin: true, // 允许跨域pathRewrite: {'^/api': '' // 重写路径}}}}};
使用第三方库
有一些第三方库可以帮助解决跨域问题，例如 axios 的拦截器可以处理跨域请求。
import axios from 'axios';axios.interceptors.request.use(config => {config.headers['Access-Control-Allow-Origin'] = '*';return config;}, error => {return Promise.reject(error);});
Nginx 代理（真神）
如果你使用 Nginx 作为反向代理服务器，可以在 Nginx 配置中设置代理规则来解决跨域问题。
server {listen 80;server_name wmcode.com;location /api {proxy_pass http://wmcode.com;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}}
#检测语法nginx -t#重启服务nginx -s reload
* Thanks you *
如果觉得文章内容不错，随手帮忙点个赞、在看、转发一下，如果想第一时间收到推送，也可以给我个星标⭐～谢谢你看我的文章。
*往期推荐 *
实现如何利用 Kafka 延时删除 用户邮箱的验证码（如何发送邮箱+源码) - 第一期
Docker小白入门教程一篇领你入门(CRUD全命令+无废话版+问题集)-第三期
Docker小白入门教程一篇领你入门(CRUD全命令+无废话版+问题集)
想要高效处理，那不妨看看 Python的 异步 Asyncio 保证效率翻多倍
银河麒麟 | ubuntu 安装国产达梦DM8数据库(安装+外网通+IDEA连接)
网络设备日志存储到指定的Kiwi-log服务器(图解+软件)
银河麒麟 | ubuntu 安装运用 docker 容器，实现容器化部署项目
银河麒麟 | ubuntu 安装zabbix监控设备信息(亲测包对)
国产操作系统－银河麒麟本地化部署Ollama国产开源的AI大模型Qwen3
Ubuntu | 安装 Zabbix 一篇就够了
Swagger | 手把手带你写自动生成接口文档的爽感(零基础亲测实用)
SpringBoot整合Openfeign接入Kimi Ai!!超简单，居然没多少行代码？？(附加兜底教程)
SpringBoot接入Kimi实践记录轻松上手
Linux | 零基础Ubuntu搭建JDK
Maven | 站在初学者的角度配置与项目创建(新手必学会)
Spring Ai | 极简代码从零带你一起走进AI项目(中英)
Open Ai | 从零搭建属于你的Ai项目(中英结合)
MongoDB | 零基础学习与Springboot整合ODM实现增删改查(附源码)
Openfeign | 只传递城市代码，即可获取该地域实时的天气数据(免费的天气API)
Redis | 缓存技术对后端的重要性，你知道多少？
Mongodb | 基于Springboot开发综合社交网络应用的项目案例(中英)
感谢阅读 | 更多内容尽在公棕号 WMCode | CSDN@小Mie不吃饭