vue打包后的文件部署非根目录下，踩坑。。。

最新推荐文章于 2022-12-19 23:57:34 发布
最新推荐文章于 2022-12-19 23:57:34 发布
阅读量1.6k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41806475/article/details/106476197
版权

vue项目需要放在例如 文件下面 http://xxx.com/address1/address2/test

正常把打包的文件放在服务器上面路径，文件引入路径全部报错；

搞了很久，各种问题；

最后的解决办法：assetsPublicPath:'/'  改成 assetsPublicPath:'./' 

qq_夏阳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 项目非根目录部署
qq_37117071的博客
05-24 1387
配置vue.config.js vue-cli3 官方配置请点击这里 module.exports = { publicPath: process.env.NODE_ENV == 'production' ? '/wx/' : '/' } 配置nginx location /wx { alias /var/local/wells/dist/...
详解Vue项目编译后部署在非网站根目录的解决方案
08-27
在部署Vue项目到非网站根目录时，需要修改配置文件，使得打包后的资源引用修改为相对路径。这可以在config/index.js文件中进行修改，将assetsPublicPath从'/'修改为'./'。 修改样式引用的资源文件 在build/utils....
proxy vue 第二个配置404_解决vuejs应用在nginx非根目录下部署时访问404的问题
weixin_39940688的博客
12-22 307
以往部署vuejs应用都是直接在nginx的location为/下直接部署，这次遇到要将vue应用部署在/vuejs-admin的非根下，使用以往部署方案直接访问就会404，这时修改步骤如下：1、修改项目router配置，如下：这里一是要修改router模式为history，另一个就是修改base地址为要访问的/vuejs-admin的地址，注意前后都有斜线2、修改build下静态资源路径前缀同上...
vue 项目在 nginx 非根目录下部署访问没有目录名，刷新404的问题 （附npm install报错解决）
weixin_42260782的博客
08-18 1166
之前部署的项目，也是部署到nginx下面的二级目录： 访问的时候通过目录名： 页面跳转没有问题，都会带着robotNew这个目录名： 现在有另一个项目需要部署，新建文件夹： 访问项目 可以刷出页面，但是没有了robotNewCloud这个目录名 一刷新就会404 修改router的index.js里面的mode，改为hash，重新部署 成功带上目录名，随便刷新都不会404 问题所在是mode是hash还是history 后来发现用history，加上base指定目录名也可以，就是URL里面
解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白
最新发布
我不是程序员的博客
12-19 1万+
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
vue-cli3.0 图片放在public，vue打包部署非根目录时，图片引入错误
Stavin Li的博客
11-07 4247
解决办法： 方法1. 修改nginx 配置，以部署目录espace为例 upstream a.xx.com{ server 127.0.0.1:8081; } server { listen 80; server_name a.xx.com; location /{ proxy_pass http://a.xx.com; } l...
VUE项目部署（Nginx代理：根目录与非根目录部署）
06-10 7807
nginx部署vue项目：根目录部署与非根目录部署
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue-router启用history模式下的开发及非根目录部署方法
10-17
本文将详细介绍如何在启用history模式下进行开发，并在非根目录下部署Vue应用。 ### 前端路由的必要性 在传统的多页面应用（MPA）中，每个页面的切换都会重新加载整个页面，这涉及到与服务器的一次完整通信。而SPA...
Vue-cli打包后部署到子目录下的路径问题说明
10-14
首先，当 Vue CLI 打包应用时，默认会生成一个静态资源文件夹，通常命名为 `dist`，这个文件夹内的内容需要被部署到服务器的根目录。然而，如果应用需要部署在服务器的某个子目录下，例如 `...
打包vue 项目到非根目录（二级目录） ，打包到根目录图片空白
王冉的博客
02-24 1813
vue打包二级目录正常显示，根目录打包，打包后图片404
Vue项目编译后部署在非网站根目录的解决方案
weixin_34366546的博客
04-24 500
背景 同一个生产部署项目，基内外网的访问路径并不相同，内网是基于域名根目录来访问，而外网却指向了一个子目录。 eg. ： vue-router: history模式内网环境：192.168.1.1:8080/index.html外网环境：domain.com/ttsd/index.html 由于开发出来的项目是要部署在客户方，且客户并不想...
Vue——项目部署到非根目录下的解决方案
无限迭代中......
03-31 3774
问题描述 同一个生产部署项目，基内外网的访问路径并不相同，内网是基于域名根目录来访问，而外网却指向了一个子目录。 eg. ： vue-router: history模式 内网环境：192.168.1.1:8080/index.html 外网环境：domain.com/ttsd/index.html 由于开发出来的项目是要部署在客户方，且客户并不想单独拿一个域名（或子域）来部署，这时...
vue 打包css路径不对_vue项目打包后部署在二级目录，导致静态资源相对引用路径错误问题...
weixin_39552768的博客
12-19 1097
一、问题vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后，部署项目至特定路径下：如：//ip:port/work/projects/此时访问：http://ip:port/work/projects/index.htmlindex.html 可以正常访问，但是引用的js，css等文件服务器响应均为404，查看引入的资源路径如下：http://ip:port...
vue-cli3+ 打包至非根目录静态资源(图片，字体文件)路径加载错误，导致不显示，丢失
weixin_42467467的博客
03-03 2888
缘由 当开发vue项目时，ele字体图标显示无任何问题，然而当项目打包部署上线时，图片，字体文件等静态资源就丢失了，通过分析是因为项目打包时是非根目录，通过publicPath进行了配置，静态资源没有匹配到publicPath，因此打包出来的路径错误，导致页面不显示资源 分析 由于是打包至非根目录下，我们需要对webpack中的publicPath进行配置，同时记得修改router.js中的base地址 // 打包至非根目录下 // vue.config.js publicPath: "/tpls/vue/
解决Vue 项目部署到非根目录方法及刷新页面时找不到资源问题
小破孩的博客
03-24 6130
背景：最近做一个项目打包后需要部署在非根目录的文件夹内进行访问，对于这一问题一开始很是头疼，最后查找和询问同事之后得到如下方法： 1、先解决如何配置非根目录访问的方式，如下： 假设打包后的dist文件内容需要部署到非根目录http.xxx.com/test子路径下，解决步骤如下： 修改vue.config.js中的publicPath module.exports = { publicPath: "/test/", //打包后部署在一个子路径上http:xxx/test/ produ
解决Vue3打包后放的位置不是服务器根目录的问题
weixin_46341296的博客
05-13 1907
一般情况下，我们打包后的东西是放在www.xxxxxx.com目录下的 但是，有时候后，我们要放在www.xxxxxx.com/xxx目录下，这时候，我们访问的时候就会各种资源找不到。 如果是vue3，那直接在vue.config.js的module.exports里面加上 publicPath: ‘./’, outputDir: ‘dist’, assetsDir: ‘static’, 就可以了 原本vue.config.js里面的module.exports配置是上面这样的 现在我们改成以下这样 这
Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下
weixin_30376453的博客
11-27 269
关于将打包后的项目文件不放在根目录下 有时候，我们总是需要这样的设置：希望将打包后的文件放在a.b.com/somepath/这样一个路径下。 然而在vue-cli创建的项目中，默认的打包路径中的静态资源的访问路径是：a.b.com/a.js，我们希望在html中的引用是a.b.com/somepath/a.js，我们可以在config/index.js中进行如下设置： module.export...
Vue项目部署到非根目录
qq_18881987的博客
01-04 3270
  最近遇到一个需要把项目部署到公司的域名80端口下的子目录https://xxx.xxx.com/idolweb 搞了半天终于成功，特此记录下，共勉。 首先vue项目相关需要更改的地方 首先是config目录下的index.js assetsPublicPath: '/', 修改为 assetsPublicPath: '/idolweb/' 注意：是 buil...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值