vue通过（NGINX）部署在子目录或者二级目录实践

最新推荐文章于 2024-07-04 10:29:00 发布
最新推荐文章于 2024-07-04 10:29:00 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 开发实验所遇问题解决方法 javaweb 文章标签： nginx java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38319289/article/details/111867185
版权
本文介绍了如何将Vue项目部署到子目录或二级目录中，主要涉及修改router/index.js和config/index.js文件，以及配置NGINX进行反向代理。通过在NGINX服务器配置文件中定义新的server块，并在主配置中设置反向代理，完成Vue项目的部署。
摘要由CSDN通过智能技术生成

1、修改 router/index.js

添加一行

base: 'jkpj', //二级目录名称

在这里插入图片描述
2、然后修改 config/index.js

增加一行

const assetsPublicPath = '/jkpj/'

在这里插入图片描述
在这里插入图片描述
3、部署时，通过NGINX的反向代理

首先，给需要部署的项目定义一个 NGINX 的 server

server {
   
        listen 8001;
        location / {
最低0.47元/天 解锁文章
Weonnn
关注
专栏目录
vue项目nginx部署子目录_vue 多项目部署---二级目录
weixin_35755434的博客
01-31 3457
新项目：同一域名下部署多个vue项目，根目录vue项目不需要按下面的方式进行打包部署https://www.bitedit.com/下面三个项目以二级目录部署https://www.bitedit.com/hmange https://www.bitedit.com/api https://www.bitedit.com/restful 以上链接不可用，作为示例，不要点击。此方法适用于多vue项目...
详解vue通过NGINX部署在子目录或者二级目录实践
10-18
主要介绍了详解vue通过NGINX部署在子目录或者二级目录实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
nginx部署多个项目；vue打包项目部署设置子路径访问；一个根域名（端口）配置多个子项目
最新发布
北海_南风
07-04 828
本文解决： - vue打包项目部署设置子路径访问； - nginx部署多个子项目； - 一个ip/域名 端口 配置多个子项目； - 配置后，项目能访问，但是刷新页面就丢失的问题
Vue项目在nginx下的部署实践（个人学习总结）
weixin_30409849的博客
09-06 134
最近有时间研究了下前端项目如何在nginx服务器下进行部署，折腾了两天总算有所收获，汗~~ 所以就想着写篇文章来总结一下，主要包括以下三个方面： 1、打包好的vue项目如何进行部署。 2、如何反向代理后端服务接口。 3、vue项目二级访问目录在nginx下的配置。 说明：nginx服务器的安装及vue项目如何进行打包不在本文的讨论范围，后面的所有实践说明都是基...
vue项目部署在域名的子目录下应该如何配置
徐三岁的博客
09-04 1480
需求：实现本地调试直接使用根目录，build发布后支持部署在http://www.xxx.com/myapp子目录下 解决：vue-cli脚手架搭建的项目，都是默认以根目录形式配置（http://www.xxx.com） ，想要部署在子目录下（http://www.xxx.com/myapp ）需要修改相应的配置才能实现。 .env.production文件 # just a flag ENV = 'production' # base api VUE_APP_BASE_API = 'http://w
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
解决vue-cli3 使用子目录部署问题
10-18
总的来说，解决Vue CLI 3子目录部署问题的关键在于正确设置 `vue.config.js` 中的 `baseUrl` 和Nginx配置，以及根据需求选择合适的Vue Router模式。确保这些设置正确无误，你的Vue应用就能顺利地在服务器的任何子...
Nginx 部署 Vue 项目到 二级目录
一直被模仿，从未被超越
11-30 4222
1、vue.config.js module.exports = { publicPath: '/rm/', 2、路由下index.js const router = new VueRouter({ base: '/rm/', }) 3、Dockerfile # 導入nginx镜像 # FROM nginx:1.13.7 # FROM nginx:1.15.1 FROM nginx:1.15.1-alpine USER root MAINTAINER Howard <howar.
学习笔记六：在Nginx非根目录下配置同域名多个子项目（Vite2+Vue3）
YGいくこさん的博客
03-28 1598
近期把公司内部管理系统从Vue2升级到Vue3版本，部署时遇到非根目录配置问题，需要在同一个域名的不同目录下配置两个网站，借此做个记录。
Nginx二级域名代理二级目录
菊花真科技
05-13 3635
Nginx二级域名代理二级目录，实现二级域名到对应二级目录作为顶级目录使用
nginx 添加域名二级访问目录 , 一个域名配置多个应用
普通人一枚
06-08 1146
nginx 添加域名二级访问目录 , 一个域名配置多个应用
nginx映射二级域名到指定目录
weixin_50016693的博客
09-23 1451
nginx映射二级域名到指定目录 server { listen 80; server_name *.xiaodouzhongwei.com; #绑定二级域名 if ( $host ~* (.*)\.(.*)\.(.*)){ set $domain $1; } root data/$domain; #自定义目录（此处=/usr/local/niginx/data/下） location / { root da
一个域名多个vue项目
qq_42385482的博客
06-12 2287
在同一个域名下根据不同路径设置不同项目，主要是配置nginx，并与vue项目的路由模式有关。
Vue二级目录部署&多环境打包部署（一）
拿回忆下酒
11-28 1548
我们的域名一般都是www.xxx.com，可是我们想实现www.xxx.com/aaa 或者 www.xxx.com/bbb怎么办呢？这就是我们今天要说的内容，部署到二级目录。 前端任务： step1：下载安装cross-env cnpm i cross-env --save-dev step2：修改根目录package.json //testA | A测试环境 tapiA | A测试环境...
vue如何部署二级目录
sslcsq的博客
08-01 4837
有的时候，我们的域名很珍贵，除了二级域名外。 我们不仅可以把项目部署到当前域名下 也可以部署到二级目录下，这样的话，就可以部署多个项目了。 比如说，我有一个域名为sslcsq.com的服务器，我想部署两个项目： 京东项目：http://sslcsq.com/jingdong 淘宝项目：http://sslcsq.com/taobao 说一下这里会遇到得问题 普通项目不会有问题， 但是如果是单页项目(比如vue写的单页面)，而且单页项目的路由用的是history模式，不管是vue还是react都会出现一个问题
vue 实现二级域名构建路径发生变化处理
weixin_34368949的博客
04-19 2088
二级域名 例如 zyf.com => zyf.com/test/ 一级域名下vue项目直接构建打包的文件引用地址为 、/static/ // 模块安装 压包 npm install--save "cross-env" 复制代码// 一级域名打包的文件路径 npm run build:prod(此处构建使用了之前文档的统一构建配置)即构建正式包使用npm run build:p...
vue history 模式打包部署在域名的二级目录的配置指南
SHEN_JAIMEI的博客
06-03 1822
最近在做项目，需要把项目部署在域名下的二级目录，并且是在用vue-router的history模式。 　　我们都知道vue-router的两种前端基本访问模式hash和history。hash模式后面带#，打包的时候只需要把绝对路径(/)换成相对对路径（./），就可以部署在任何地方，不需要服务器配合，但是不好看，所以我们一般选择history模式，但是history模式需要配合服务器的部署。 本文主要是在vue-cli3版本下，对部署在域名的二级目录下做四处的配置: 1. vue...
nginx在二级目录部署下vue文件
07-22
现在，你的vue应用程序应该已经在二级目录下成功部署了。可以通过访问 `your-domain.com/subdirectory` 来访问它。记得将 `your-domain.com` 替换为你的域名，`/subdirectory` 替换为你的二级目录名称。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值