vue项目打包后资源相对引用路径的和背景图片路径问题

最新推荐文章于 2023-06-01 19:40:15 发布

转载最新推荐文章于 2023-06-01 19:40:15 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luyuefeng/p/8507493.html

文章标签：

#javascript #ViewUI

本文介绍如何在Vue项目中正确配置路径设置，确保打包后能够正常使用静态资源，包括修改配置文件中的公共路径及背景图片路径。

vue项目中若要使用相对路径来获得相应静态资源，需要修改以下内容来确保项目打包后能正常运行。

1、修改config => index.js => build => assetsPublicPath 中的'/'成为'./'

2、在build => util.js 里找到ExtractTextPlugin.extract增加一行：publicPath: '../../'，主要解决背景图片路径的问题。

转载于:https://www.cnblogs.com/luyuefeng/p/8507493.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

diaobiteng1128

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决Vue背景图打包后访问路径错误的问题

CodeWhizZ的博客

10-06

1322

通过正确配置文件路径、使用Webpack的file-loader处理和修改样式中的背景图路径，我们可以解决Vue背景图打包后访问路径错误的问题。在Vue项目中，当使用背景图作为样式的一部分时，有时在打包后访问路径会出现错误。它会将这些文件复制到打包后的输出目录，并生成一个带有哈希值的文件名，确保文件名的唯一性。现在，在组件的样式中，我们需要修改背景图的路径，以使用Webpack处理后的路径。现在，应该能够正确加载背景图了。首先，确保你的背景图文件位于正确的位置，并且在Vue组件中已经正确引用。

Vue 引入图片

2401_87546826的博客

11-04

3162

│ └── my-image.png 在 Vue 组件中访问图片（注意：这里使用的是相对路径，Webpack 会处理这些路径）： html 在构建后，这些资源会被处理并放在最终的 dist 目录中，但你不能直接通过浏览器访问 dist/assets 目录下的资源，因为它们是由 Webpack 打包的一部分。将图片放在 public 目录中 Vue CLI 创建的项目中有一个 public 文件夹，这个文件夹中的所有内容都会在构建时被复制到最终的 dist 目录中，并且可以直接通过根 URL 访问。

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

vue相对路径打包

likuntao123的博客

12-31

751

vue相对路径打包 相对路径打包的意义：主要是项目打包以后可以直接在本地运行。首先，修改config => index.js文件其次，修改build => util.js文件（添加publicPath） ...

vue使用相对路径打包，可以直接打开

包子源的博客

12-19

7535

首先需要修改config/index.js文件：

Vue 动态加载public图片和图片预览例子

漫—流的博客

07-11

7656

一、vue 静态资源文件夹 Vue 有两个存放静态资源的文件夹：assets和public。 1、 assets文件夹使用require()方法加载静态资源，如： require('./assets/image/success.png') 这里的文件经过webpack处理过的，require方法的参数不支持变量，只能存文件的路径，因此加载图片时不能动态获取。 2、public文件夹（以前vue1.0版本叫static） public文件夹的文件是不经过webpack处理，打包时直接把public复制到打

vue把请求根路径配置在public文件中，打包后可随时修改根路径

vhgvhbj的博客

04-26

3189

vue把请求根路径配置在public文件中，打包后可随时修改根路径

vue 引入public里面的图片

weixin_43045869的博客

07-29

4620

直接用绝对路径

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

08-27

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

解决vue单页面应用打包后相对路径、绝对路径相关问题

11-20

在开发Vue单页面应用时，面对打包后的相对路径与绝对路径问题，主要是因为部署环境的差异和反向代理的需求。通常，默认情况下，Webpack与Vue CLI打包的资源引用使用的是绝对路径，这在本地开发和直接部署到服务器根...

vue 项目打包时样式及背景图片路径找不到的解决方式

10-16

在使用Vue进行项目开发和打包的过程中，常常会遇到样式文件和背景图片路径无法正确引用的问题。这一问题经常出现在Vue项目打包后，尽管文件可以被正确找到，但引用的资源文件，如字体和背景图片等却无法正确加载。这...

Vue打包后访问静态资源路径问题

10-16

Vue打包后访问静态资源路径问题的核心在于理解生产环境和开发环境的不同，以及正确配置静态资源的引用路径。通过修改`assetsPublicPath`、使用绝对路径、`require`引入或设置`publicPath`，可以有效解决这个问题。在...

Vue3项目打包后资源找不到

LueLueLue77的博客

06-10

7841

vue项目打包后放到服务器上资源找不到，解决办法

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

坚持原创

03-02

1万+

情况一当不配置vue.config.js或者没有publicPath属性时，默认访问的静态路径是服务器的根目录服务器根目录下没有js文件夹所以访问失败，把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了（注意重启wamp）情况二当配置为当前目录’./’ 访问正常，其实publicPath当前目录即打包后的index.html的当前目录，即dist目录，怎么证明，把publicPath的值设置为’…/’，看看情况三情况三又报错，把js,css等静态.

vue组件中引入public文件，build打包后找不到资源报错404

vue+iview 动态渲染表格（vue.js结合iview插件）

09-16

6818

在组件中我使用object标签预览pdf文件 <object width="100%" height="100%" data="/help/help.pdf" type="application/pdf" id='help-object'> </object> 该help.pdf文件我是放在了public文件夹下（public/help/help.pdf），为了不被webpack编译（位置如图）很开心没问题，但是build打包之后给后端，就出现问题了，该文件路径报错4

vue打包文件以及背景图片路径问题

Zhoulizhen_的博客

05-10

1527

在项目的文件夹下进行cnpm run build 打包，打包成功之后是这样的：打包成功后显示的内容。然后在文件夹下会有dist文件夹：然后进入index.html文件运行此文件，会发现浏览器报错，现在就来更改路径，在config文件夹下的index.js里修改两处内容：未修改时路径是’/’ ,也就是说在/前面加一个点，有两处位置，还有一处，直接搜索assetsPublicPath,同样...

VUE项目打包之后修改配置文件（包括后台地址，图片公共路径等）

最新发布

06-17

### Vue 项目打包后路径配置解决方案在 Vue.js 开发中，项目打包后可能会遇到路径问题，这些问题通常会影响资源的正确加载，导致图片、样式文件或脚本无法正常工作。以下是针对 Vue 项目打包后路径相关问题的解决方案。 #### 1. 静态资源路径错误当静态资源（如图片、CSS 文件等）在打包后无法正确加载时，可能是由于 `publicPath` 配置不正确导致的。Vue CLI 提供了 `vue.config.js` 文件来配置项目的公共路径。通过设置 `publicPath` 参数，可以解决静态资源路径问题。例如，如果项目部署在子目录下，则需要将 `publicPath` 设置为对应的子路径[^1]。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-sub-path/' : '/' }; ``` #### 2. 接口路径丢失问题当 Vue 项目打包后接口路径丢失时，可以通过以下方法解决： - **确认接口路径配置**：检查项目的 API 路径是否为绝对路径，如果是相对路径，则需要调整为绝对路径。 - **使用环境变量**：通过 `.env` 文件配置不同的环境变量，确保开发和生产环境下的接口地址正确[^2]。 ```javascript // .env.production VUE_APP_API_BASE_URL=https://api.example.com ``` 在代码中使用环境变量： ```javascript const apiUrl = process.env.VUE_APP_API_BASE_URL; ``` #### 3. 页面刷新报错问题页面刷新报错通常是由于路由模式配置不当引起的。如果使用的是 `history` 模式路由，在服务器端需要配置重定向规则，将所有未匹配的路径重定向到 `index.html` 文件[^3]。对于 Nginx 配置示例： ```nginx location / { try_files $uri /index.html; } ``` #### 4. 打包后显示空白问题如果发现本地图片显示不出来，可能是因为图片地址引用错误。可以在 `vue.config.js` 中新增 `publicPath` 参数，或者直接修改 `build/utils.js` 文件中的 `ExtractTextPlugin.extract` 方法，添加 `publicPath: '../../'`[^4]。 ```javascript module.exports = { chainWebpack: config => { config.module .rule('images') .use('url-loader') .tap(options => Object.assign(options, { publicPath: '../../' })); } }; ``` ### 注意事项 - 确保 `publicPath` 的值与实际部署环境一致。 - 在使用 `history` 模式路由时，必须配置服务器端的重定向规则。 - 如果项目中有动态生成的资源路径，建议统一使用相对路径或通过环境变量动态生成。