vue-cli3.0 vue打包部署非根目录时，静态资源图片路径错误

最新推荐文章于 2024-08-10 22:18:52 发布

原创

最新推荐文章于 2024-08-10 22:18:52 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack

本文介绍了如何在Vue CLI3项目中将应用部署到子路径下，涉及到vue.config.js的修改，以及Nginx配置的调整。详细步骤包括：更新vue.config.js的publicPath属性和router.js的baseURL属性；然后修改Nginx配置，通过root或alias设置路径。此外，还探讨了root和alias的区别，并提供了NGINX location配置的详细说明链接。

项目中需要把应用部署在子路径下，所以就需要修改vue配置和NGINX配置

以子路径为market为例.eg.http://localhost:8000/market/

1、第一步
修改vue.config.js文件
配置 publicPath属性

publicPath: "/market/",   // 默认 /  修改为  market

修改router.js
配置base属性

export default new Router({
   
   
  mode: 'history',
  base: process.env.BASE_URL,  // process.env.BASE_URL的值为配置的publicPath 的值
  routes: [

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

guyue_01

关注关注

0
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

08-27

主要介绍了解决vue项目打包后提示图片文件路径错误的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

详解在vue-cli3.0中自定css、js和图片的打包路径

10-16

以上内容总结了在Vue CLI 3.0中自定义静态资源打包路径的方法和步骤，详细说明了Webpack输出配置的修改，以及使用MiniCssExtractPlugin插件和loader进行资源路径定制的技巧。掌握这些知识点，将有助于我们更好地控制...

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

vue-cil和webpack中本地静态图片的路径问题解决方案

dhwtxcz66815的博客

06-26

645

1 本地图片动态绑定img的src属性一般我们在html中或者vue组件文件中引用图片是这样，这是不需要做特别处理的我们将图片放入assets中或者重新建立个文件夹img什么的都可以，随意～但是我们这时候可能会有个需求就是我们要动态绑定一组本地图片 1 将图片当成模块先引进来，再绑定但是这种做法局限性比较大，模块化差，代码不好看。如果我...

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

一码

12-04

691

1.原因解析当用vue-cli自动构建项目后，有两种运行方法，分别是：　　npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。　　npm run build : 打包项目，资源使用相对路径，所以会出现路径错误问题。注: 绝对路径：从盘符开始的路径，如：C:\windows\system32\cmd.exe 相对路径：从当前路径...

关于Vue背景图打包之后访问路径错误问题

最新发布

weixin_45016440的博客

08-10

1259

根据‘build/webpack.base.conf.js’与‘config/index.js’对应关系，可知大于10000B的图片被打包到了‘static/img’目录，所以引用路径就变成了‘static/img/+文件名’。修改‘config/index.js’下assetsPublicPath的‘/’为‘./’，在‘build/utils.js’中ExtractTextPlugin.extract下添加‘publicPath: '../../'’

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

08-29

主要介绍了vue-cli中打包图片路径错误的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

10-17

主要介绍了vue webpack打包后图片路径错误的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

解决vue项目打包后背景图片路径错误问题

qq_41512822的博客

01-19

1411

今天打包vue项目上线后，发现背景图片未加载出来，其他图片加载正常，那个未加载出来的背景图片是在css文件中引入的，调试时发现图片的路径不对，改了build文件夹下utils.js文件，然后背景图片就能正常加载了。打开build/utils.js，添加一行代码： publicPath: '../../', 背景图片在生产环境路径错误的原因：构建后的项目, 都需要读取静态资源，静态资源分为三...

vue 打包后 static 中图片路径不对的问题，腾讯T2大佬手把手教你

2401_84139728的博客

04-11

958

没错，其实在我们准备打包项目之前，需要考虑的一个问题是：【我们的项目最终是要部署在根目录还是子目录】如果是部署在，并不会出现什么问题，因为你的资源文件放在static中，然后你在引用的时候，都是这样的路径来引用（不管是css中，还是template中），这样是不会有任何问题的。大家看到我这个项目的访问路径，应该就知道，我这是属于【】部署的情况。那么在部署的时候，就有可能出现本文要说的这个问题【vue 打包后 static 中图片路径不对的问题】所以，本文后续内容的前置条件就是部署。

vue3+vite项目使用本地图片打包后不显示

Handsome_gir的博客

01-06

3337

vue3+vite项目使用本地图片打包后不显示。

vue-cli 打包之后图片引用路径问题

AmberWu

05-02

4899

过完五一，感觉整个人跟废了一样，虽然五一期间也没做什么，就是感觉累，感觉困。但无奈今天还有一堆事情等我去做。早上来先发了一版v5.0.1，开启项目新版的第一次！但是毫无疑问，出了很多问题，除了上次打包后js、css路径错误问题（详情请见：https://blog.csdn.net/AmberWu/article/details/79529363），这次出现了图片undefined的问题。 ...

vue-cli3打包注意路径的问题

weixin_30354675的博客

05-31

1173

vue-cli3打包后页面路径报错，需要根据官方提供的vue.config.js对路径进行重新设定，具体代码如下： module.exports ={ baseUrl :process.env.NODE_ENV === 'production' ?'./':'/'} 转载于:https://www.cnblogs.com/zhx119/p/10953148.html...

vue3+vite项目，打包后，图片失效的问题

insist_life的博客

08-02

1万+

第一次使用vue3+vite写一个项目，不太清楚这里的配置和vite构建工具的特性，所以在开发的时候，图片的路径都是用的相对路径；这样的静态路径引入，在开发和打包上测试环境都没有问题，都能正常显示！可以发现，在域名下直接接了src文件，但是这个域名下面是没有src文件夹的。所以浏览器报错了，同时页面没有图片显示，所以打包的时候，图片的路径出问题了！结尾：此文章仅为了下一次有相同的问题能够快速的解决，具体造成这种错误的原因需要去了解vite，有时间再说吧！这样的话，开发和上测试的时候，图片都能够正常显示了！

[ vue3 + vite ] 在开发环境时可以正常访问图片路径，打包部署到服务器上却显示路径undefined问题

Hiny2y2的博客

01-19

896

在开发环境时是正常的，图片可以正常显示，但是打包部署到服务器之后，图片地址就变成undefined了，几番周折，在Stack Overflow上找到了解决方法，具体的路径要改成自己的。我原本使用vite文档中给的方法引用项目文件夹中的图片，然后再打包部署到服务器上图片就正常显示了。今天遇到了这个问题，记录一下。