vue项目修改assetsPublicPath后打包出现路径错误

最新推荐文章于 2024-07-05 09:34:46 发布

一行注释

最新推荐文章于 2024-07-05 09:34:46 发布

阅读量2.1k

点赞数

分类专栏： vue 文章标签： extract publicPath

本文链接：https://blog.csdn.net/qq_37818095/article/details/109162949

版权

vue 专栏收录该内容

74 篇文章 4 订阅

订阅专栏

由原来assetsPublicPath：‘/ ‘ 修改相对路径 assetsPublicPath：'./'后出现路径错误问题
static/css/static/img/login.png 路径多了两层static/css/

出现问题原因

ExtractTextPlugin抽离css文件时没有转换资源引入路径，导致app.css引入了相对app.css目录为"static/img/ .png"的静态资源，该路径相对index.html即为：static/css/static/img/ .png。

处理方案

publicPath:"../../"
extract: false 不抽离css文件

\build\webpack.prod.conf.js

 module: {

    rules: utils.styleLoaders({

      extract: false,//改成false

    })

  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一行注释

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决vue项目打包后提示图片文件路径错误的问题

08-27

解决 Vue 项目打包后提示图片文件路径错误的问题在 Vue 项目中，经常会遇到一个问题，即在生产环境下，图片文件路径错误的问题。这主要是因为在生产环境下，文件目录结构发生了变化，从而导致图片文件路径错误。...

解决vue-cli项目打包出现空白页和路径错误的问题

10-18

在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。首先，让我们来深入了解...

参与评论您还未登录，请先登录后发表或查看评论

解决Vue打包之后文件路径出错的问题

11-29

这里以vue-cli创建的项目为例 1、文件路径不对找到config文件夹下的index.js文件修改一下位置看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/’改为‘./’ 2、背景图片路径不对在css中写的background-img的路径出错需要找到build文件夹下的utils.js,修改一下位置加入红框内字段即可。以上这篇解决Vue打包之后文件路径出错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

vue-cli创建的项目部署在相对路径，你需要做这些。

weixin_34347651的博客

07-26

719

如果静态文件不是部署在网站根目录下，vue-cli将给你造成巨大的麻烦。你不能直接把build好的文件抛进一个目录。你不能直接在本地打开用vue做好的静态网站。改成相对路径，主要需要做两步。 1、修改config => index.js => build => assetsPublicPath 中的'/'成为'./'...

【Vue】public 和 assets目录的区别

最新发布

lklalmq的博客

07-05

114

vue-cli中的图片资源存放位置详解_vue.js_脚本之家 (jb51.net)

vue打包相对路径，设置publicPath没作用解决方法

ejunda的博客

10-18

1883

不知道为什么会导致，publicPath没有生效。transpileDependencies这个属性，

解决VUE项目打包路径错误，以及自定义打包

mo_jiu的博客

02-23

1459

做vue项目的时候碰到打包上线白屏的问题，这里我使用了一种方式就解决了；在config文件夹中的index.js里找到build里面的 assetsPublicPath: './' 原本它是 assetsPublicPath: '/' 换成 './'即可。我们打包完的项目一般都是存在dist文件夹中，会有一个index.html和一个static文件夹存放js，css等；如果你不希望...

vue打包相对路径路由错误[解决]

lllomh的博客

10-11

2167

这里不说资源路径问题, 只谈路由, 就是页面不加载. 路由设置一下目录就行了, 放服务器用相对目录不能用history 模式 base: '/app/', export default new Router({ // mode: 'history', base: '/app/', routes: [ { path: '/', name...

vue-cli中打包图片路径错误的解决方法

08-29

但是，在使用vue-cli打包图片时，可能会出现图片路径错误的問題，这篇文章将为大家介绍如何解决这个问题。问题描述在使用vue-cli构建项目时，第一次打包部署到服务器上时，可能会出现图片加载不出来的情况。这种...

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

10-16

在开发Vue项目时，我们经常会遇到打包（npm run build）后打开`index.html`页面出现空白，以及图片路径错误的问题。这两个问题对于项目的部署和运行是至关重要的，下面将详细解释这些问题的原因及解决方案。问题一...

vue webpack打包后图片路径错误的完美解决方法

10-17

在使用Vue.js和Webpack进行项目开发时，遇到打包后图片路径错误的问题是常见的困扰。Vue CLI在构建过程中，默认的配置可能导致静态资源，如图片，无法正确加载。本文将详细解析这个问题的原因，并提供一种完美的解决...

vue-cli 3.x 如何配置assetsPublicPath； vue.config.js如何更改assetsPublicPath配置；

热门推荐

wakaka112233的博客

05-13

1万+

1. Failed to load resource: net::ERR_FILE_NOT_FOUND 静态资源加载不到 2. vue-cli 3.x 如何配置assetsPublicPath 3. vue.config.js如何更改assetsPublicPath配置

vue-cli 如何配置assetsPublicPath； vue.config.js如何更改assetsPublicPath配置；

u010565037的博客

09-10

6055

问题： vue项目完成打包上线的时候遇到静态资源找不到的问题，网上很多解决办法都是基于vue-cli 2.x 来解决的，但从vue-cli 3.0以后，便舍弃了配置文件夹（便没有了config这个文件夹），所有配置文件都写在了一个文件vue.config.js中，并且需要自己手动创建，创建位置：与src同级。解决方法： 1.vue-cli 2.x版本在config文件夹下的index.js中修改 assetsPublicPath: './' 2.vue-cli...

vue打包 assetsPublicPath改变，static下文件访问不到的问题

Mr青青子衿

08-29

3533

问题背景：一、.smallTarget项目，使用vue官网脚手架，修改了/config/index.js文件，把默认打包后的文件夹名称改成了“smallTarget”，这时候npm run build 打包部署，就可以访问到以smallTarget为根目录的页面。...

vue history publicPath失效踩坑

weixin_47438917的博客

03-01

890

vue history publicPath失效踩坑

Vue中publicPath导致通过URI区分环境部署失败、Vite 和 Webpack 的区别以及 Bootstrap 本地资源文件不生效的问题

本博客记录了从2014年以来在工作学习中遇到的技术问题、解决方法以及部分个人人生经历、经验等内容。

03-16

530

在使用Nginx代理一个已经部署好的 Vue 项目时，发现线上环境正常，但是测试环境中使用域名代理却是空白页，查看源码发现线上环境和测试环境的区别在于，线上环境加载的资源如 app.js 使用的是相对路径，而测试环境使用的是绝对地址，从而导致资源加载不正常。这就回到了 Vue 中 vue.config.js 配置文件中的 publicPath 配置选项，这个配置默认为空或者设置为 ./ 相对目录，从而让 Vue 根据项目的部署位置自动加载对应在资源文件。

vue打包assetsPublicPath为‘./‘和‘/abc/‘的两种情况

qq_44021541的博客

06-01

2768

vue 测试和正式环境打包（npm run build） assetsPublicPath路径可以设置为大致两种在nginx代理的方式也各有差异第一种: assetsPublicPath: ‘ ./’ location / { root /home/lw/hy/admin/dist; index index.html index.htm; autoindex on; expires 30m; } 第二种: assetsPublicPath: ‘/qbcd/’

vue相对路径修改，以及assets和static文件的区别

lyc2786161648的博客

03-19

2953

首先，assets文件夹和static文件夹在vue-cli生成的项目中，都是用来存放静态资源的。 1、assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。build的时候由Webpack解析为模块依赖。 2、static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通...

vue url-loader 打包图片资源，会多出图片， publicPath没起作用

m0_52946104的博客

09-23

753

vue url-loader publicPath 不起作用

Vue项目使用HBuilder打包成APP详细教程

在打包过程中，可能会遇到诸如资源路径错误、兼容性问题、调试困难等问题，需要根据具体情况进行调整和解决。例如，某些静态资源路径在打包后可能需要调整，以适应不同的部署环境；对于兼容性问题，可能需要引入...