vue打包时的publicPath，就是打包后静态资源的路径

已于 2022-03-07 20:12:35 修改
阅读量1.1w 收藏 21
点赞数 5
文章标签： 自动化 python javascript
于 2021-03-02 16:43:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41254345/article/details/114288320
版权

在这里插入图片描述

情况一

当不配置vue.config.js或者没有publicPath属性时，默认访问的静态路径是服务器的根目录
在这里插入图片描述
在这里插入图片描述
服务器根目录下没有js文件夹所以访问失败，把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了（注意重启wamp）
在这里插入图片描述
在这里插入图片描述

情况二

在这里插入图片描述
当配置为当前目录’./’
在这里插入图片描述
访问正常，其实publicPath当前目录即打包后的index.html的当前目录，即dist目录，怎么证明，把publicPath的值设置为’…/’，看看情况三

情况三

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

在这里插入图片描述
又报错，把js,css等静态文件复制到wamp/www目录下试一下
在这里插入图片描述
访问成功，说明：publicPath设置为当前目录’./'就是dist目录的设想，没错

码林鼠
关注
  • 5
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目打包publicpath_Vue项目打包路径问题
weixin_39915700的博客
12-22 4676
最近在搞Vue CLI的项目打包，出现了常见的路径问题，经过研究问题和文档，现在有了自己的看法，以下所有内容都是建立在Vue CLI3之上。关于vue.config.js文件：这个文件的配置主要是用来设置打包的文件相关信息的命令：npm run build，而调试模式npm run serve，只不过是是对build到内存后，再次启动到node服务器。在调试模式下，这个文件的更新并不会因为ctrl...
vue打包后css路径_Vue打包后访问静态资源路径问题
weixin_30475939的博客
01-13 2491
Vue打包后访问静态资源路径问题Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？我们知道，执行npm run build 后会生成dist文件夹，把里面的index.html在浏览器运行会发现图片路径出错啦！！！解决方法：1.先找到config下的index.js文件把最后的'/' 改为 ...
前端 JS 经典：vue 开发中的 base 和 publicPath
weixin_64684095的博客
05-27 2165
不知各位小伙伴有没有遇到过这样的问题，就是本地开发的好好的，结果打包后自信满满的交给运维部署，一上线，就是页面资源找不到了，跳转页面白屏了。等各种问题，这大概率就是配置问题。有这么两个配置 base 和 publicPath, 这个两个配置在 vue2 和 vue3 的表现形式不同，下面会详细介绍。这两个配置一般影响的是生成环境，对本地开发没啥影响。
Vue CLI 设置 publicPath：打包后的应用可部署在任意路径
前端技术
12-21 3575
Vue CLI 设置 publicPath：打包后的应用可部署在任意路径
vue-cli如何正确设置publicPath保证打包部署后静态资源路径正确的问题
热门推荐
一键写代码的博客
07-23 2万+
几种设置publicPath后，再对比打包后的index.html文件 测试背景： 每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录 部署的时候，前端打包的文件部署在服务器的一个静态资源目录下 我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内，都需要前端正确设置publicPath才能正确访问的。 打包后的文件目录： ├─dist ├─css ├─img └─js index.html 一、不设置publicPath时，既设置为''，部署后请求
解决vue打包后静态资源路径错误的问题
没做过产品的后端不是个好前端
08-05 5280
vue项目完成的最后一步就是打包部署上线，但是打包部署的过程往往不是那么一帆风顺的，现将遇到问题和解决方案记录如下。 图片路径问题 起因：页面中引入资源的方式往往有如下几种 * HTML标签中直接引入图片， 如 <img src="../assets/images/index.png"> * JS代码中定义资源路径属性，如src: require('../assets/images/i...
vue打包静态资源路径不正确的解决方案
xiechengjian的博客
03-21 6442
vue打包静态资源路径不正确的解决办法vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题，常见的有两个1、js，css路径不对解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’2、css中引用的图片资源找不到我的login.vue文件中通过src方式引入css&lt;style scoped src="../../static/css/...
vue项目打包publicpath_vue项目打包发布线上环境
weixin_39654619的博客
12-22 1258
文章目录说明发现一些朋友在群里询问如何线上发布vue项目.从而暴露出来很多有意思的问题.所以这篇博文简单介绍一下vue项目线上发布的情况.本地环境mac osnode 10.16vue 2.6vue-cli 4.0线上环境centOS6node 10.16nginxvue是最近很火的前端框架,所以它依赖的是浏览器,及我们可以从浏览器定位到你服务器nginx,然后nginx把指定的静态资源转发出来,...
Vue 打包静态文件路径设置
果果的博客
10-18 1万+
1、js，css的路径不对  方法：找到 config/index.js，将其中的assetsPublicPath值改为’./’ assetsPublicPath:'./' 2、css中引用的图片资源找不到  方法：找到 build/utils.js，增加一行代码即可： publicPath:"../../" 3、config下的index配置 以上是将文件打包在dist下的guogu...
解决vue项目配置测试环境后打包静态资源路劲错误
jared.wang
12-10 1225
因为项目需要配置几个测试环境,以及生产环境，所以使用了 process.env.NODE_ENV 和启动命令 来区分打包的环境是哪一个。 完成后发现一个问题：当 输入 npm run test时 打包后的路径缺失了 config/index.js 里面的 assetsPublicPath 路径配置 assetsPublicPath 失效原因: 在build.js 文件的开头, 将环境命名改为 ‘testing’ process.env.NODE_ENV = 'testing' 解决 assetsPu.
Vue打包后访问静态资源路径问题
10-16
Vue打包后访问静态资源路径问题的核心在于理解生产环境和开发环境的不同，以及正确配置静态资源的引用路径。通过修改`assetsPublicPath`、使用绝对路径、`require`引入或设置`publicPath`，可以有效解决这个问题。在...
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
Vue CLI 3.0 是一个基于 Vue.js 的命令行工具...以上就是关于 Vue CLI 3.0 打包静态资源找不到路径问题的解决方法和相关配置知识。确保正确配置 `publicPath` 并理解其他配置项的作用，有助于顺利部署和运行 Vue 项目。
详解vue静态资源打包中的坑与解决方案
08-28
二、 静态资源打包使用相对路径后 CSS 文件引入大图片路径错误问题 * 问题描述：在解决了上述问题后，css 中引入的 assets 目录下的大图片资源出错了（服务端 404）。 * 问题分析：图片引入路径有误，css 目录下的 ...
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下...
vue webpack打包后图片路径错误的完美解决方法
10-17
在使用Vue.js和Webpack进行项目开发时，遇到打包后图片路径错误的问题是常见的困扰。Vue CLI在构建过程中，默认的配置可能导致静态资源，如图片，无法正确加载。本文将详细解析这个问题的原因，并提供一种完美的解决...
「12月·长沙」第四届机器人、自动化与智能控制国际会议（ICRAIC 2024）
最新发布
07-25 377
第四届机器人、自动化与智能控制国际会议（ICRAIC2024）将于2024年12月在中国长沙召开，聚焦机器人、自动化与智能控制领域的最新研究，提供学术交流平台，推动技术发展。
Python写UI自动化--playwright(录制自动化用例脚本)
qq_52758588的博客
07-24 902
保姆级的playwright录制用例教程
【Python selenium过极验滑块】用自动化selenium 操作GEETEST极验滑块，简单粗暴
₰₯₮ 的博客
07-24 265
用Python 的 selenium模块，自动化过极验滑块验证，轻松丝滑，刷歪歪
vue打包静态资源配置
07-27
Vue在打包静态资源时，需要进行一些配置以确保正确地将资源打包到最终的生产环境中。 首先，在Vue的配置文件vue.config.js中，可以设置outputDir选项，用于指定打包输出的目录。可以通过设置该选项的值为一个相对或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值