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

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

guyue_01

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

阅读量2.1k

点赞数

分类专栏：原创文章标签： vue.js webpack

本文链接：https://blog.csdn.net/guyue_01/article/details/106100366

版权

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

摘要由CSDN通过智能技术生成

项目中需要把应用部署在子路径下，所以就需要修改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背景图打包之后访问路径错误问题

黑黑黑客儿

03-22

1万+

通过vue-cli脚手架创建的vue项目中，背景图片打包之后路径访问错误。导致该问题的原因：是url-loader的匹配路径。解决方案1：设为img标签；解决方案2：修改limit值；解决方案3：css不单独打包；

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

08-29

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

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

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

dhwtxcz66815的博客

06-26

579

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

vue项目打包后出现图片引用路径错误的问题

最新发布

weixin_45016440的博客

08-10

392

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

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

一码

12-04

528

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

Vue打包后图片路径错误

pobu168的博客

01-25

504

传送门

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

10-16

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

vue-cli V3.0版本的使用详解

10-17

Vue-cli V3.0版本是Vue.js的官方开发脚手架工具，它提供了一种快速启动和构建Vue.js项目的方法。通过本文，我们来详细介绍如何使用Vue-cli V3.0版本创建和配置Vue项目。 1. Vue-cli V3.0版本概述 Vue-cli V3.0是Vue...

Vue-cli打包后部署到子目录下的路径问题说明

10-14

首先，当 Vue CLI 打包应用时，默认会生成一个静态资源文件夹，通常命名为 `dist`，这个文件夹内的内容需要被部署到服务器的根目录。然而，如果应用需要部署在服务器的某个子目录下，例如 `...

vue cli3.0打包上线静态资源找不到路径的解决操作

10-15

在使用 Vue CLI 3.0 进行项目打包时，可能会遇到静态资源（如图片、CSS、JavaScript 文件等）找不到路径的问题。这个问题通常出现在部署到服务器后，因为本地开发环境与线上环境的资源路径不同。以下是如何解决这个...

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

10-17

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

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

qq_41512822的博客

01-19

1134

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

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

2401_84139728的博客

04-11

717

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

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

AmberWu

05-02

4818

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

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

weixin_30354675的博客

05-31

1131

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

vue-cli build 打包图片加载失败

HGGshiwo的博客

07-22

554

新版的vue-cli，图片位置放在assets下，通过./assets/xxx.png进行引用。打包时出现404，此时在工程目录中新建vue.config.js 添加 module.exports = { publicPath: './' } 重新build 即可。

vue-cli3+ 打包至非根目录静态资源(图片，字体文件)路径加载错误，导致不显示，丢失

weixin_42467467的博客

03-03

2949

缘由当开发vue项目时，ele字体图标显示无任何问题，然而当项目打包部署上线时，图片，字体文件等静态资源就丢失了，通过分析是因为项目打包时是非根目录，通过publicPath进行了配置，静态资源没有匹配到publicPath，因此打包出来的路径错误，导致页面不显示资源分析由于是打包至非根目录下，我们需要对webpack中的publicPath进行配置，同时记得修改router.js中的base地址 // 打包至非根目录下 // vue.config.js publicPath: "/tpls/vue/

vue-cli3.0实战：构建完善移动端框架

开发者可以通过在项目根目录下创建`vue.config.js`文件来配置项目的各种选项，例如Webpack打包配置、CSS预处理器设置等。在CSS方面，文章强调了对Sass的支持。Sass是一种强大的CSS预处理器，允许我们使用变量、...