vue项目发布路径问题

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

#vue

本文探讨了在使用npm run build后，将dist目录部署到WAMP Server时遇到的index.html显示空白的问题。通过调整config/index.js中assetsPublicPath的设置，解决了不同环境下路径配置冲突的难题。

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

npm run build之后将dist目录放到wampserver上却发现index.html一片空白

那么可能是路径问题

打开config/index.js

修改assetsPublicPath: '/'为'./'即可

但是在本地环境localhost:8080运行又会出现问题，需要把路径改为原来的/

现在找到了问题，但希望有一个统一的方式解决开发环境与生产环境这个矛盾，希望看到这篇文章的读者可以指教

关于vue.js发布后路径引用的问题解决
12-01
本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍： 在发布到iis目录下时候，如果放在网站的根目录下的时候，是不会有什么问题的 但是一旦放在了非根目录的其他文件夹里面，这时候index.html里引用的js和css文件路径都会找不到 错误如下 打开index.html文件发现里面引用的文件路径不对 这里只需要更改config/index.js配置就可以了 更改后的配置 这里也视当前环境的具体环境而定。 如果你也遇到这样的问题，希望对您有帮助 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或
Vue Cli2.0项目自定义访问路径，并打包发布
weixin_45941687的博客
03-30 937
因为同一个服务器，同一个域名与端口，根目录已经配置了一个项目，所以第二个项目需要更改项目项目访问路径，不能使用 ' / ',这里使用了 " /base/ "作为根路径
vue打包配置发布路径
qq_21810059的博客
11-09 1141
目的：配置路径，让打包后的dist在本地可以打开。 方法：修改build文件夹下边的的webpack.dev.conf.js文件，找到devServer下边的publicPath，这个来源于config文件，所以找到对应的属性修改成“./”就可以了。 ...
vue项目打包后想发布在apache www/vue 目录下
weixin_34087307的博客
12-22 363
使用的是vue-element-admin 做示例，其他项目应该大同小异。 使用vue-router的browserHistory模式，配置mode: 'history', 有更好的体验。 目的： 想将项目打包后发布到apache的www下的vue子目录 先讲结论： 需要修改router/index.js中new Router 配置，加...
vue打包修改发布路径
zk_jy520的博客
12-23 496
文件修改路径 都在 confing/index.js文件 assetsPublicPath: '/manage/',
解决vue项目打包后提示图片文件路径错误的问题
08-27
解决 Vue 项目打包后提示图片文件路径错误的问题 在 Vue 项目中，经常会遇到一个问题，即在生产环境下，图片文件路径错误的问题。这主要是因为在生产环境下，文件目录结构发生了变化，从而导致图片文件路径错误。...
vue :src 文件路径错误问题的解决方法
08-27
在 Vue 项目中，经常会遇到 :src 文件路径错误问题，这个问题可能会导致图片或者文件加载失败，影响项目的正常运行。今天，我们将详细介绍 vue :src 文件路径错误问题的解决方法，并解释相关的知识点。 首先，让...
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
08-27
解决Vue项目发布后背景图片加载失败的问题，关键在于理解生产环境和开发环境下的资源路径差异，并通过设置正确的公共路径或使用绝对路径来确保资源能够被正确加载。通过以上的方法，你可以避免因路径问题导致的背景...
Vue-cli打包后部署到子目录下的路径问题说明
10-14
Vue CLI 是一个非常流行的前端构建工具，用于快速搭建 Vue.js ...这将帮助你的 Vue.js 应用在服务器的二级子目录下运行，同时解决了资源路径的问题。请记住，不同的服务器配置可能略有差异，因此需要根据实际情况调整。
浅谈vue项目,访问路径#号的问题
01-19
刚入手vue，有好多的疑问，目前遇到的是vue项目启动之后，输入http://ip:port，我发现浏览器里面显示的地址栏竟然是http://ip:port/#/，这个”/#/“不知道是什么东西，于是百度查了一下。 原因：对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也正是称之为单页面的原因。而vue-router默认hash模式——–使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。因为对于正常的页面来说，更换url一定是会导致页面更换的，而只有更换url中的查询字符串和hash值的时候才不会重新加载页面。 如果不想要
vue项目部署在非根路径(vue2 /vue3)
huanglihui10071030的这些年的青春
02-29 1502
vue部署在非根路径时，路由以及非路由的跳转需要做一下配置和调整
vue 项目本地线下路由跳转正常，部署到线上报错找不到模块
TTianYe的博客
11-15 2446
线上报错信息如下： 问题所在：路由引入方式 报错的原因，所有的路由采用的是懒加载，比如： let course = () => import('@/pages/innovation/course'); 修改以后 import map from "../pages/aboutUS/map"; 整个项目都是懒加载路由，所以出现了这样的状况，目前项目有少部分路由直接引入，大部分还是懒加载 ...
Vue项目部署遇到的坑（你肯定会遇到！）
weixin_34122548的博客
12-01 961
#部署非ROOT环境下组件CSS中 background-img图片问题 总所周知后台部署代码的时候，是直接把我们通过npm run build(vue-cli生成项目) 的代码直接放到ROOT目录的，即使你放到其他目录我们通过config文件build对象下面的 assetsPublicPath: '/clinet', // If you are deployed on the root pa...
vue路径使用方法及自定义路径介绍
coldriversnow的专栏
11-25 5544
1.首先说根目录 根目录用“/” 2. 当前文件夹 ./当前文件同级目录 3.当前文件夹的上一级 …/当前文件上一级目录 4.自定义目录 说明下 之前的vue是在webpack.base.conf.js 文件里配置的在这里直接加入就可以 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/胜利ue.esm.js', '@': resolve('src'), } }, 现在需要在v...
Vue 项目的成功发布和部署
A____t的博客
05-08 6887
Vue 项目的发布
vue中引入路径用法及说明
zzy7075的专栏
03-07 3590
vue中引入路径@的用法及说明
vue项目路径配置
weixin_63124815的博客
12-30 936
在项目根目录创建jsconfig.json文件，将下面代码添加进去。即可用@指代src目录。
如何搭建一个vue项目(完整步骤)
m0_67392661的博客
06-22 4972
查看版本的两种方式 出现版本号则说明安装成功（最新的以官网为准） 这里注意：安装vue-cli对node.js的版本是有要求的 装的两种方式：输入cmd命令 查看安装的版本（显示版本号说明安装成功） 如果你原来有版本或者版本比较低，可以升级...
vue项目打包发布
最新发布
03-08
为了顺利进行Vue项目的打包和发布，需确认已安装Node.js以及npm或yarn。确保本地环境满足这些条件之后，在Vue项目的根目录下操作。 #### 执行打包命令 在终端或者命令提示符窗口中输入`npm run build`来触发构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值