vue打包dist包，通过nginx反向代理，在本地访问

最新推荐文章于 2025-06-08 14:37:04 发布
最新推荐文章于 2025-06-08 14:37:04 发布
阅读量2.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： nginx vue 文章标签： nginx反向代理 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_32678401/article/details/97242576
本文详细介绍了如何从官方网站下载Nginx并进行配置，包括设置监听端口、指定静态资源目录、实现反向代理等功能。同时，提供了启动、停止及重启Nginx的常用命令。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第一步：去官网下载nginx

第二步：打开配置文件：conf/nginx.conf，有三处配置

server {
    listen 8888;

    location / {
        # 配置dist文件路径
        root /project/project-rsdq/RSDQ/rsdq-client/dist;
        index index.html index.htm;
    }

    # 反向代理 转发http请求
    # rsdq-web 需与 vue.config.js里的跨域配置proxy里的名称一致
    location /rsdq-web{
        proxy_pass http://172.33.44.11:8081/rsdq;
    }
}

命令：

（1）start nginx   -> 启动

（2）nginx -s stop  -> 停止

（3）nginx -s reload  -> 重启

 

Vue代理模式和Nginx反向代理(Vue代理部署不生效)
CVPR收割机的博客
02-06 2668
那么这时候数据请求将请求的是http://localhost/api/admin/employee/login地址，但是我们需要请求的接口。前端发送：http://localhost:7070/api/admin/employee/login。经过代理转换为：http://localhost:8080/admin/employee/login。前端发送：http://localhost:7070/api/admin/shop/status。：打包时这个代理并不会跟着打包。打包结束后生成dist文件夹。
如何将vue项目打包在服务器上使用nginx运行，并使用反向代理解决跨域问题
m0_67390379的博客
07-30 485
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。可以改用其他端口，但是改用其他端口不方便，因为使用域名访问的话默认就是80端口，所以我们要让nginx启动在80端口，把占用80端口的程序干掉就行了。打开配置文件可以发现，里面又一个一个的server对象组成（如下），我们每次增加一个项目增加一个server就行。...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下： 1. 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置) 执行成功如下图所示： 然后此时你会发现项目下多了一个 dist 文件夹，dist下文件便是项目打包之后生成的文件。 此时我们直接在浏览器中打开index.html，是会报错的，什么都看不到。 2. 安装express-generator生成器 执行  $ npm install express-generator -g
vue打包后反编译到源代码(reverse-sourcemap)
热门推荐
u013015301的博客
03-28 2万+
1.打开cmd,使用管理员打开 2.找到需要编译的js的目录下，这里以d://dist/static/js目录为例 执行： cd d://dist/static/js 执行完成后在该目录会看到目录下存在下面的文件名：app.xxxxxx.js.map，这里以app.5ef4326406dfb69eb193.js.map为例，如下图 图1 3.执行npm，加载reverse-sourcemap资源 执行：npm install --global reverse-sourcemap 4.反
Vue部署到Nginx上及问题解决
最新发布
qq_46263813的博客
06-08 317
刷新页面显示404，需添加try_files语句。dist文件即打包文件。
vue项目打包之dist反编译
weixin_47269950的博客
06-07 1万+
批处理器脚本
根据vue打包出来的dist文件进行反编译,推出代码
weixin_37601321的博客
06-13 1万+
111
Vue反编译dist包到源码
油墨香^-^的博客
08-01 3462
1.首先需要在管理员模式下打开cmd2.找到需要编译的dist/static/js的目录下 执行完成后在该目录会看到目录下存在下面的文件名：0.7ab7d1434ffcc747c1ca.js.map，这里以0.7ab7d1434ffcc747c1ca.js.map为例，如下图:3.全局安装reverse-sourcemap资源npm install --global reverse-sourcemap4.反编译 执行：reverse-sourcemap --output-dir source。
项目打包运行dist以及nginx配置
04-11
通过打包工具将开发项目转化为生产就绪的"dist"目录，然后利用Nginx的强大功能进行高效地请求处理和静态资源分发，可以确保应用的稳定性和高性能。在实际操作中，不断学习和熟练掌握这些技能，对于提升IT专业人士的...
Vue中跨域及打包部署到nginx跨域设置方法
10-16
通常，我们会把打包后的文件（位于`/dist`目录）部署到Nginx服务器上，然后在Nginx配置中设置代理。 ### Nginx的跨域配置方法 当Vue项目打包后，为了在生产环境中解决跨域问题，我们需要在Nginx中设置相应的代理。...
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
在Vue项目开发中，使用Vue CLI构建应用后，通常会通过`npm run build`命令生成一个用于部署的dist目录。然而，在将这个dist目录部署到Nginx服务器时，可能会遇到CSS样式不生效的问题。这个问题通常与静态资源的路径...
反编译和打包
09-18
可以反编译APK文件和进行修改，重新打包操作
vuejs,webpack 打包 之后的项目 demo
04-04
vue 相关的js，webpack打包文
Vue项目打包编译优化方案
10-14
当一个较复杂的vue项目打包后，文件会非常大，而且访问时资源加载速度很慢，本文介绍了几种措施来优化。
7.docker部署前端vue项目，实现反向代理配置
qq_37992410的博客
11-17 1136
通过docker构建以nginx为基础的镜像，将vue生成的dist包拷贝至nginx目录下，实现项目的部署与反向代理。dockerfile、compose、nginx的配置详解；
Nginx 入门 vue打包 反向代理
没有翅膀的我们，只是随便认为不能飞而已
06-15 819
安装 http://nginx.org/en/download.html 解压 运行nginx.exe 默认端口80 （我要管理员权限运行） 把你vue项目打包生成的dist文件内容 放在新建文件project下， 配置 找到下面对应的位置加上几行代码 error_page 500 502 503 504 /50x.html; location ...
关于vue反向代理的坑
qq_38933238的博客
05-13 888
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ publicPath: './', outputDir: 'dist', assetsDir: 'assets', indexPath: 'index.html', runtimeCompiler: true, transpileDependencies: true, configureWebpack: { .
Vue 运行打包后的dist文件
leg的博客
02-25 5618
终极方式 npm install -g serve serve -s dist
vue反编译dist包到源码
WEDGJ的博客
05-11 8195
最近由于公司老项目上的问题，由于项目很老，之前交接的源码包中缺少了很大一部分模块，但是现在线上的环境和dist包是正常运行的，领导希望能够手动将这部分补全，由于前期项目的不规范，缺少接口文档以及原型图，因此无法知道到底该如何补全，因此，我想着能不能通过dist包去反编译源码包呢，经过多方面探索发现是可行的，但是只能编译出vue文件，但是也满足基本需要了。
nginx 反向代理 vue 空白
03-16
### Nginx 配置反向代理导致 Vue 应用空白页解决方案 当配置 Nginx 作为 Vue 应用的反向代理时，如果出现空白页面问题，通常是因为前端路由模式（`hash` 或 `history`）、静态资源配置不当或者反向代理未正确处理请求等原因造成的。以下是详细的分析和解决方法： #### 1. 前端路由模式的选择 Vue 路由支持两种模式：`hash` 和 `history`。 - 如果使用的是 `hash` 模式，则 URL 中会带有 `#` 符号，例如 `/about` 变成 `/#/about`。这种情况下不会遇到 404 错误，因为所有的路径都通过哈希值解析[^1]。 - 如果使用的是 `history` 模式，则需要服务器配合处理前端路由。如果没有正确配置，刷新页面或直接访问子路径可能会返回 404。 对于 `history` 模式的 Vue 应用，在 Nginx 的配置中需确保所有未知路径都被重定向到应用入口文件（通常是 `index.html`）。 --- #### 2. 正确配置 Nginx 以下是一个典型的 Nginx 配置示例，适用于 Vue 应用的 `history` 模式： ```nginx server { listen 80; server_name yourdomain.com; root /path/to/vue/dist; # 替换为实际打包后的 dist 文件夹路径 index index.html; location / { try_files $uri /index.html; # 关键配置项，用于支持 history 模式 } location /api/ { # 处理后端 API 请求的反向代理 proxy_pass http://backend_server_address/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 上述配置的关键在于： - **`try_files $uri /index.html`**：此指令告诉 Nginx 对于任何未匹配到具体文件的请求，均返回 `index.html`，从而让前端框架接管路由逻辑[^2]。 - **API 反向代理**：通过 `location /api/` 定义了对后端服务的代理规则，避免跨域问题[^3]。 --- #### 3. 静态资源加载失败的原因及解决 如果 Vue 应用中的 CSS、JS 等静态资源无法正常加载，可能是由于以下几个原因引起： - **相对路径问题**：Vue CLI 默认生成的静态资源路径可能为相对路径（如 `./static/js/main.js`），这可能导致在二级目录下部署时出现问题。可以通过修改 `vue.config.js` 设置公共基础路径： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-sub-path/' : '/' }; ``` - **Nginx 静态资源映射错误**：确认 Nginx 的 `root` 指令指向 Vue 打包后的 `dist` 目录，并且该目录下的文件权限允许被读取[^4]。 --- #### 4. 其他常见问题排查 - **白屏伴随控制台报错**：检查浏览器开发者工具中的 Console 和 Network 栏目是否有具体的错误提示，比如 JS/CSS 加载失败或网络请求异常。 - **Vue Router Base Path 不匹配**：如果项目部署在非根路径上（如 `/subdir/`），需要在 Vue Router 初始化时指定 `base` 属性： ```javascript const router = new VueRouter({ mode: 'history', base: '/subdir/', // 替换为实际的子路径 routes, }); ``` - **Nginx 缓存影响**：清除浏览器缓存或强制刷新页面（Ctrl+F5），以排除旧版本文件的影响。 --- ### 总结 为了防止 Nginx 配置反向代理时 Vue 应用出现空白页面问题，应重点关注以下几点： - 使用 `try_files $uri /index.html` 支持 `history` 模式； - 确保静态资源路径正确无误； - 修改 Vue Router 的 `base` 属性适配子路径部署场景； - 添加必要的反向代理规则以解决跨域问题。 ---
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值