vue 项目非根目录部署

最新推荐文章于 2024-06-20 10:26:21 发布
最新推荐文章于 2024-06-20 10:26:21 发布
阅读量1.3k 收藏
点赞数
分类专栏： 学习 文章标签： vue 部署 子目录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37117071/article/details/90511507
版权
本文详细介绍了如何在非根目录下部署Vue项目，包括修改vue.config.js以适配子目录路径，以及配置Nginx服务器进行正确路由。通过编译打包和特定部署步骤，确保项目在指定文件夹下正常运行。
摘要由CSDN通过智能技术生成

配置vue.config.js

vue-cli3 官方配置请点击这里

module.exports = {
   
    publicPath: process.env.NODE_ENV == 'production' ? '/wx/' : '/'
}

配置nginx

      location /wx
最低0.47元/天 解锁文章
wells_xq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Vue项目编译后部署在非网站根目录的解决方案
08-27
Vue项目编译后部署在非网站根目录的解决方案 在开发Vue项目时，部署到非网站根目录是一个常见的问题。本文将介绍如何解决这个问题，包括修改配置文件、修改样式引用的资源文件、修改路由和修改nginx的配置。 修改...
vue-router启用history模式下的开发及非根目录部署方法
10-17
主要介绍了vue-router启用history模式下的开发及非根目录部署方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目部署到非根目录--前后分离+nginx部署
平兄的笔记
10-28 1412
背景 项目部署时, 不能用新域名和端口, 需要放到子目录下, 如: https://XX.XX.com/app/ vue cli3 项目打包 # 修改 vue.config.js module.exports = { publicPath:'/app/', // .... } nginx 配置 # ... server { listen 80; server_name localhost; # 静态资源, 代码文件应该在 /code/front/app/ 下 location
vue项目部署到子路径下需要更改的设置
qq_35875316的博客
01-13 1746
vue项目部署到服务器上会默认为例如ROOT的文件夹下，这样会直接访问改文件夹下的index.html文件。 假如现在有需求是把项目放到某一个子路径下，如果不更改设置会出现资源不加载，引用js文件找不到，刷新页面报404等问题。 1、在public文件夹下引用js文件，路径写成 ./ 2、在config/index.js文件中，打包路径应写成 /子路径名/ 例如：/child/。 3、在路由文件中修改base属性，这个是防止刷新跳回默认路径的。 export default new Router({
Vue项目的详细目录结构解析
最新发布
weixin_45131680的博客
06-20 637
我们在使用Vuevue-demo├── dist //项目构建后的输出目录├── public├── src├── tests //选装：测试模块├── ...dist—— 项目构建打包后的默认输出目录。查看详情 ->—— 项目依赖文件，其中包括很多基础依赖和自己安装的依赖。查看详情 ->public—— 存放公共资源和项目的主入口文件index.html。查看详情 ->src—— 项目核心文件夹：包括项目源码，各种静态资源等等。是我们开发的重点工作目录。查看详情 ->test。
解决vite+vue3打包部署到非根目录路径问题
fk129
07-14 2134
修改vite.config.js文件，base为部署路径。
vue部署 nginx非根目录部署
linlinzzzzz的博客
02-08 636
【代码】vue部署 nginx非根目录部署。
VUE项目部署（Nginx代理：根目录与非根目录部署）
06-10 7777
nginx部署vue项目：根目录部署与非根目录部署
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
nginx部署多个vue项目的方法示例
11-19
今天由于公司需求，需要在同一域名端口下，部署两个项目；今天花了一上午终于弄好了，选择赶紧做一个笔记。 如何连接阿里云服务器就不在这里说了，请看我以前的文章。 首先需要的效果 http://47.97.244.83/login ...
解决Vue 项目部署到非根目录方法及刷新页面时找不到资源问题
小破孩的博客
03-24 6105
背景：最近做一个项目打包后需要部署在非根目录的文件夹内进行访问，对于这一问题一开始很是头疼，最后查找和询问同事之后得到如下方法： 1、先解决如何配置非根目录访问的方式，如下： 假设打包后的dist文件内容需要部署到非根目录http.xxx.com/test子路径下，解决步骤如下： 修改vue.config.js中的publicPath module.exports = { publicPath: "/test/", //打包后部署在一个子路径上http:xxx/test/ produ
vue3+vite项目部署服务器，选择非根目录访问
蓝枫秋千的踩坑记录
05-14 409
但是根目录已经部署了另外一个项目A了，这个时候要在部署另外一个项目B。之前直接输入http://test.com即可访问A项目。配置，其中root对应的路径为项目nginx资源的路径。比如你的地址是http://test.com。访问A：http://test.com/A。访问B：http://test.com/B。vue3+vite项目，需要部署服务器。这样，你本地和服务器的访问也会自动带上。这样的话，本地访问不带，服务器会带。如果B项目也这么干的话就冲突了。vite项目的话，修改。
vue项目二级目录（非根目录）部署，prerender-spa-plugin配置
豆。的博客
11-09 1296
Vue二级目录项目用 prerender-spa-plugin 做 SEO 优化，构建项目无法完成也不报错，一直卡在浏览器检测阶段
Vite2+Vue3学习笔记（六）：在Nginx非根目录下配置Vite2+Vue3项目
YGいくこさん的博客
08-30 2371
新手小白Vue3学习笔记第六篇，Nginx配置Vite2+Vue3项目。
Vue项目部署到非根目录
qq_18881987的博客
01-04 3261
  最近遇到一个需要把项目部署到公司的域名80端口下的子目录https://xxx.xxx.com/idolweb 搞了半天终于成功，特此记录下，共勉。 首先vue项目相关需要更改的地方 首先是config目录下的index.js assetsPublicPath: '/', 修改为 assetsPublicPath: '/idolweb/' 注意：是 buil...
Vue项目编译后部署在非网站根目录的解决方案
qq_33834489的博客
12-03 1035
https://juejin.im/post/5ae03b98f265da0b8e7f1251 背景 同一个生产部署项目，基内外网的访问路径并不相同，内网是基于域名根目录来访问，而外网却指向了一个子目录。 eg. ： vue-router: history模式 内网环境：192.168.1.1:8080/index.html 外网环境：domain.com/ttsd/index.html...
vue应用在nginx非根目录下的部署
PaulXerxes的博客
05-05 3279
一般部署node-moudle的vue应用在nginx上，直接将dist中打包好的文件部署在根目录'/'下并写好路由就可以正常运转了，但是非根目录下还要对webpack的打包路径、静态资源路径做一些修改，要不然服务器就找不到文件了= = 现在假设我们需要在服务器的/doge路径下部署vue应用，需要经过以下几步配置~ 1.项目router配置 如果项目有配置router，在/router/ind...
vue-cli3路由histroy模式部署在非根路径
qq_42881675的博客
11-11 1145
路由配置 export default new Router({ mode: 'history', base: 'root-dir', // 需要配置此项来设置路由的基础路径，不然路由表只会按根路径来匹配 routes: [ { name: 'Root', path: '/', component:Root }, { ...
vue-cli4设置打包相对路径
qq_23447231的博客
10-18 3702
昨天把导航稍微写了一下，今天想要上传到github上，使用github的服务器来看看我的静态页面长什么样子，然而在因为我的部署不在根目录，所以打包的路径有问题，在网上找了很多方法尝试，解决办法如下，此方法不管部署在哪里都可以： 修改配置vue.config.js module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '././' : '/', } 这样在打包时资源引用路径就是相对路径，而开发过程中是绝对路径
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值