vite 二级目录 nginx部署

最新推荐文章于 2025-03-20 09:53:26 发布
原创 最新推荐文章于 2025-03-20 09:53:26 发布 · 603 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

本文介绍了在Vue应用中如何配置router以使用`createRouter`方法，设置`history`和`autoLoadRoutes`，同时讲解了Vite项目的配置文件`vite.config.js`中关于基础路径`base`的设置，以及如何配合Nginx进行部署。

1、router配置

const router = createRouter({
		history: createWebHistory('/taskManage/'),
		routes: autoLoadRoutes
	})

2、vite.config.js配置

base: '/taskManage',

3、nginx配置

userpdk
关注
vue2.0 vue3.0 打包二级项目-如何部署二级目录
Leslie_hxd的博客
11-05 4093
看了很多其他大佬的文章，我这边做了一个笔记记录了一下vue打包二级目录的方法 我们想要的效果是什么 我们想www.taobao.com/web二级目录来访问我们的页面 如果我们没有做任何的配置，直接将打包的dist文件放在web下像这样。 我们页面访问是空白的原因就是因为打包后的文件是从根目录开始找的，也就是会在www.taobao.com下面去找资源文件，而我们的资源在web下 最终我们前端要做的就是打包出来的dist文件里面的index.html访问路径是这样的 vue2.0 vue3.0都
使用vite打包并部署vue项目到nginx
突破编程
11-08 4246
Vite 是一个新型的前端构建工具，专为现代浏览器和工具链而设计，提供了极快的冷启动和热模块更新（HMR）速度。以下是使用 Vite 创建 Vue 3 项目的详细步骤：一、安装 Node.js 和 npm首先，确保计算机上安装了 Node.js 和 npm（Node 包管理器）。具体安装方法这里不再赘述，可以在命令行中运行 和 来检查它们是否已安装以及安装的版本。二、全局安装 Vite接下来，需要全局安装 Vite。打开命令行或终端，并运行以下命令： 或者，如果使用的是 Yarn，可以运行： 注意：从
nginx部署vite4+vue3项目（解决所有遇到的问题！同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等）
爱吃雪糕的小布丁的博客
08-17 6636
解决所有遇到的问题！同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等
Vue3+vite部署nginx的二级目录，使用hash模式
weixin_40918145的博客
06-07 806
打包出来的目录路径是这样子的。
使用Docker将Vite Vue项目部署到Nginx二级目录
qq_15233495的博客
06-17 3095
将使用Vite创建的Vue项目打包，并以二级目录方式部署到Nginx。需要注意静态资源路径，反向代理、路径重写等问题。
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue3+Ts+Vite+History模式，部署在三级目录下
weixin_39964419的博客
02-05 1016
Vue3+Ts+Vite+History模式，项目打包后部署到Nginx三级目录下，并且经过一次Nginx转发。项目打包部署后，页面访问空白
【Nginx】解决在Nginx+Vue部署多个前端项目，二级目录不能访问、访问空白的问题
走在搬砖的路上！
01-31 5771
解决在Nginx+Vue部署多个前端项目，二级目录不能访问、访问空白的问题
nginx 部署前端vue项目
m0_74825526的博客
03-07 685
Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。优点支持海量高并发：采用IO多路复用epoll。官方测试Nginx能够支持5万并发链接，实际生产环境中可以支撑2-4万并发连接数。内存消耗少可商业化配置文件简单 除了这些优点还有很多，比如反向代理功能，灰度发布，负载均衡功能等。
vue build 与 nginx采用二级路由配置
Jonny的博客
05-25 1526
文章目录引言解决方案vue.config.jsnginx配置 引言 在项目中一个项目上存在多个子应用系统，对多个系统路径统一访问时用二级路由来区分对应的子应用，但是在开始的时候折腾了很久始终没得到解决。 解决方案 vue.config.js 具体的详情参见：vue cli 对应Dir配置 module.exports = { /** * You will need to set publicPath if you plan to deploy your site under a sub pat
vite打包时发布时，放在服务器的二级目录中
hjh15827475896的博客
03-16 2328
如果我们的站点根目录为 public , 我们访问的时候使用的是 http://www.abc.com/ 访问到了站点的根目当，现在我们要访问 http://www.abc.com/mysite/#/在history模式下，使用 http://www.abc.com/mysite/index.html 来访问是错误的。说明一下， hash 模式下的访问路径是：http://www.abc.com/mysite/index.html。
【记录】vue3项目用vite打包后部署至nginx服务器二级目录，报错码500或者白屏的解决方法
前面的区域以后再来探索吧
10-15 511
由于我的项目需要部署在服务器的二级目录下，所以需要在nginx的配置文件nginx.conf中新写一个location，表示链接到二级目录。同时，需要注意的是，在新增的location中应该使用。此外，请你一定记得在vue3前端的vite.config.js中配置好生产环境的base，否则无法部署至二级目录。由于期间尝试的方法很多，最后发现正确的nginx.conf配置文件写法会有影响，遂记录一下。记得将“你的二级目录”替换为你的英文目录名称！
Vue3+Vite+history模式+Nginx 部署二级路径
weixin_43422861的博客
11-08 4563
vite+vue3+history
vite 打包二级目录记录
weixin_41645458的博客
01-02 1397
使用 BrowserRouter 时需要进行下面配置。使用 HashRouter， 缺点就是路由会带 #首先放一个简单粗暴的方法。
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
大雾起了清晨
09-04 1783
我们开发中会遇到这样的需求，让我们用服务器nginx部署一个用域名的二级目录来访问项目来放访问项目。
如何将vue+vite项目打包二级目录
weixin_47774000的博客
03-20 633
目的，让项目配置到服务器后，访问的路径由 ：local：host8080/web1。改成local：host8080/二级目录/web1创建productor文件和denvelopment文件，即生产和开发文件。
vite 打包到二级目录下
深度
07-31 810
"build:prod": "vite build --mode production --base=/manager/"
VUE3 发布后刷新无法访问（二级目录部署）
u011429803的专栏
12-29 1651
VUE3 发布后刷新无法访问（二级目录部署）
vuerouter二级目录 history模式nginx配置
最新发布
08-09
在部署基于 Vue Router 的 `history` 模式应用到 Nginx 的二级目录时，需要从 Vue 项目的构建配置和 Nginx 的路由重写两方面进行设置，以确保前端路由能够正常工作。 ### Vue 项目配置 首先，需要在 Vue 项目的路由配置中指定 `base` 参数，以匹配部署路径。例如，如果应用将部署在 `/rector/bnu/` 下，则路由配置应如下： ```javascript const router = new VueRouter({ mode: 'history', base: '/rector/bnu/', routes }); ``` 此外，对于使用 Vite 构建的 Vue 3 项目，可以通过 `vite.config.js` 设置 `base` 参数，以支持动态的部署路径： ```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { fileURLToPath, URL } from 'url'; import { loadEnv } from '@vitejs/plugin-react'; // 假设使用React插件，根据实际插件调整 export default defineConfig(({ mode }) => { const root = process.cwd(); const viteEnv = loadEnv(mode, root); return { base: viteEnv.VITE_BASE_PATH, plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } }; }); ``` ### Nginx 配置 在 Nginx 方面，需要配置重写规则，将所有请求重定向到 `index.html`，以便 Vue Router 能够接管路由。以下是一个示例配置，适用于部署在 `/rector/bnu/` 的应用： ```nginx location /rector/bnu/ { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /rector/bnu/index.html; } ``` 此配置确保所有对 `/rector/bnu/` 目录下的请求都会被重定向到 `index.html`，从而允许 Vue Router 处理这些请求并正确显示页面。 ### 总结 通过上述 Vue 项目的路由配置和 Nginx 的重写规则设置，可以有效地支持 Vue Router 的 `history` 模式在 Nginx 的二级目录下运行，确保应用能够在预期的路径上正确加载和导航[^1]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值