vue项目nginx二级域名配置

最新推荐文章于 2024-04-18 13:52:58 发布
最新推荐文章于 2024-04-18 13:52:58 发布
阅读量1.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 vue nginx 二级域名配置方式 文章标签： vue nginx 二级域名配置 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44330517/article/details/99636104
本文介绍如何将Vue项目进行打包，并通过配置Nginx实现本地部署。包括设置路由base路径，Nginx配置示例，以及将打包后的文件放置于指定目录下，最后通过访问本地URL查看部署效果。

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

1、将vue项目路由的加入base配置如下图所示，打包备用

在这里插入图片描述
2、配置nginx，下图所示
在这里插入图片描述
3、在步骤2中的nginx的根目录下面html文件夹下面新增data文件夹，在data下面新建vue和test文件夹，将步骤1打包的文件放到vue文件夹和test文件夹，访问本地http://localhost/test/和http://localhost/vue/

在这里插入图片描述在这里插入图片描述

vue build 与 nginx采用二级路由配置
Jonny的博客
05-25 1485
文章目录引言解决方案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
vue做二级域名java_修改vue的配置项支持生产环境下二级域名访问的方法
weixin_35112865的博客
02-27 420
本文主要记录如何配置vue的打包文件配置项，使打包后的文件可以支持二级域名的访问。1、常规打包在实际的项目中，我们通常都使用npm run build直接打包文件后丢到服务器上访问打包后的文件目录是这样的：访问的静态资源都是地址是这样的：我们现在要放在服务器的二级域名下访问地址，那么访问的路径就应该也加上二级域名，该如何配置尼？2、静态文件地址修改静态文件的访问地址应该加上二级域名前缀：方法：...
Nginx-部署2个vue项目（多个项目）-二级域名设置代理
路虽远行则将至，事虽难做则必成。
05-16 3908
最近在实际开发过程中，需要在服务器部署2个项目。需要nginx二级域名。开始时候在网上查了一圈，各有说法，不是很全，很头大。这里把自己成功的二级域名代理记录一下。网上有很多文章说要该router.js文件，要该vue.config.js中的publicPath的路径问题。不用这么麻烦。很多文章都是说在nginx配置2个server就行了，但其实你不在域名哪里解析的话是访问不到的（重点）。
nginx+vue+webpack配置二级域名
web_1993的博客
03-16 1917
⚠️：文中的demourl指的是二级文件的名称 1.修改生成文件中的路径 config/index.js文件 2.修改路由文件中的base 配置 3.修改nginx中的配置 4.在地址栏中输入地址即可 大功告成 配置完成后千万记得重启哦 ...
vue项目配合nginx部署到子目录、二级域名的解决办法
热门推荐
一键写代码的博客
01-27 1万+
默认的vue项目是部署到网站根目录的。 但是，有些情况下，一个域名内需要放置多个内容。所以，只能分子域名或是子目录来部署。 譬如，当前网站的域名是：www.abc.com 使用nginx做代理的时候，分配给我们的部署vue项目的域名地址是：www.abc.com/vuedemo 先看nginx的配置： location / { root html; index index.html index.htm; gzip_static o
详解vue通过NGINX部署在子目录或者二级目录实践
10-18
在实际项目中，有时我们需要将Vue应用部署到服务器的子目录或二级目录下，而不是作为顶级域名的直接入口。这时，我们可以利用NGINX的反向代理功能来实现这一需求。NGINX是一款高性能的HTTP和反向代理服务器，能够...
nginx部署多個Vue项目：二级域名配置实战
"本文主要介绍如何使用Nginx部署多个Vue.js项目，使得它们在同一域名下，通过不同的路径或二级域名来访问。我们将探讨Vue项目的配置调整以及Nginx服务器的配置方法。" 在实际的Web开发环境中，有时我们需要在一个...
nginx配置同一域名同一端口下部署多个vue项目
最新发布
strggle_bin的博客
04-18 1906
调整完毕后，直接执行build打包命令，可以发现index.html引入js路径增加了/project。在vue.config.js文件中修改publicPath路径为/project/在router文件夹中index.js文件中修改base为 ‘/project/’如果页面中有二级路由的话，配置文件中一定不能用root，要用alias.默认端口就只有一个，有多个项目需要部署到同一端口下。根据根路径不同分别代理访问不同项目。
web服务器nginx+部署前端vue项目
03-22
### Nginx 与前端 Vue 项目的部署 ...对于前端 Vue 项目来说，通过简单的几步配置即可将其部署到 Nginx 上，从而充分利用 Nginx 的高性能和稳定性。无论是对于个人开发者还是企业级项目，Nginx 都是值得考虑的选择。
不同的域名可以指向同一个项目
weixin_33763244的博客
10-10 137
server{ listen 80; server_name www.hello.com; index index.html index.htm index.php admin.php; root /home/wwwroot/default/dexin/dragon/public; #error_page 40...
Vue项目服务器部署之子目录部署方法
10-17
在本文中我们给大家整理了关于Vue项目服务器部署之子目录部署方法和具体步骤，需要的朋友们参考下。
vue nginx二级域名配置
白小白的小白的博客
06-05 1668
一般来说项目会有一个前台和后台，前台用一级域名，后台用二级域名，比如一个项目的域名是www.xxx.com，访问www.xxx.com时自然会访问到前台的首页，而后台一般是www.xxx.com/xxx，一级域名自然很简单，但是配置二级域名(后台)时，就会报js css的404错误   1. 在了解原因的时候我们先说一下nginx中root和alias的区别，root会根据完整的url请求来映射到目录中，而alias会把location后面配置的路径丢弃掉，把当前匹配到的目录指向到指定的目录，下面可以举个例
vue+nginx配置二级域名
编程浪子
07-08 800
【1】修改路由文件 【2】修改配置文件 【3】修改nginx配置文件 【4】在nginx配置文件中增加 【5】重启nginx文件，用二级域名访问 http://192.168.199.xxx:28086/hbsnsj/ https://xxxx.xxxxxxx.com/hbsnsj/ ...
vue-cli打包并配合nginx域名二级子目录
qinchaidaren的博客
03-09 2741
可以修改三个配置 1.路由 const route = new Router({ mode : 'history', base: '/admin/', routes:[] }) 2.打包文件 config/index.js build设置 assetsPublicPath: '/admin/', 3.nginx配置 try_files $uri $uri/ /admin/in...
Vue 路由history模式nginx部署(二级目录)
weixin_40749372的博客
10-20 3132
公司常用服务器为apache，最近一个项目需部署到nginx目录，且是在子目录下，即访问链接：http://www.xxx.com/rector/bnu/ apache服务器配置很简单，只需要在index.html同级目录下添加.htaccess文件即可，代码如下： RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /rector/b.
关于vue2.0项目路由的hash和history遇到的问题
qq_36877078的博客
09-18 479
2、使用history路由模式，打包后在本地通过http-server测试时有时会发现，除了默认的home页外，其他页面都报404，此时可以尝试把history模式去掉后来测试。如果是线上环境，需要后端配合修改配置。1、使用history路由模式，必须设置base参数。
NGINX多个VUE项目使用独立二级域名部署
锋哥聊DORIS数仓
06-13 785
因为项目前后端分离部署，多个项目前端使用同一个nginx发布，每个项目对应不同的二级域名 dsp项目: dsp.xxxx.com bi项目：bi.xxxx.com 1.在vue.config.js文件下找到publicPath配置，添加如下配置（vuecli2就是config文件夹下的assetsPublicPath配置） publicPath: process.env.NODE_ENV === "production" ? "/bi/" : "/bi/", 2.修改项目router的ba...
若依框架二级域名部署，及刷新之后404处理
morecccc的博客
02-23 3035
若依框架二级域名部署，及刷新之后404处理
Nginx部署多个Vue项目，配置二级域名
04-19 3169
Nginx部署多个Vue项目，配置二级域名
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值