VUE webpack 打包 页面间的用相对路径

于 2021-11-24 17:05:15 发布
阅读量1.4k 收藏
点赞数
分类专栏： 前端 文章标签： javascript js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012174809/article/details/121519720
版权
本文探讨了前端项目打包时遇到的路径问题，当发布到具有特定路径的后端服务时，默认的绝对路径会导致404错误。解决方案是利用webpack的publicPath设置为'./'，将资源引用改为相对路径。理解这一点对于优化前端项目的部署至关重要。
摘要由CSDN通过智能技术生成

1.为什么要用相对路径

比如 你的前端要打包发布 后端服务nginx配置有自己的路径(除了域名外) 这时以前默认的绝对路径打包方式就有问题了 就会导致访问各种404

2.解决方法

  webpack知识熟悉一下,可以见我前一个博客

  在webpack.prod.conf.js中，output中添加或者修改为 publicPath: ‘./'，这是修改了js，css引用地址

 

 更改图片为相对路径

 

会改对不重要  重要的是理解哦

如花菇凉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue和webpack打包项目相对路径修改的方法
01-19
一般vue使用webpack打包是整个工程的根目录，但是很多情况下都是把vue打包后的文件在某子目录下。 修改： 1，打开index.js assetsPublicPath:'/' 改为： assetsPublicPath: './' 2.解决css里面的路径问题，打开utils.js 添加红色框参数即可； publicPath: '../../'
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
weixin_33921089的博客
09-04 544
资源相对引用路径 问题描述 一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。 但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。 解决办法 打开webpack.prod.conf.js 找到output：增加 ...
webpack 相对路径配置
Daisy
05-06 2660
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router...
Webpack打包生成相对路径的资源引用
weixin_34007879的博客
03-30 1635
2019独角兽企业重金招聘Python工程师标准>>> ...
vue相对路径打包
likuntao123的博客
12-31 662
vue相对路径打包 相对路径打包的意义：主要是项目打包以后可以直接在本地运行。 首先，修改config => index.js文件 其次，修改build => util.js文件（添加publicPath） ...
解决vue单页面应用打包后相对路径、绝对路径相关问题
11-20
在开发Vue单页面应用时，面对打包后的相对路径与绝对路径问题，主要是因为部署环境的差异和反向代理的需求。通常，默认情况下，Webpack与Vue CLI打包的资源引用使用的是绝对路径，这在本地开发和直接部署到服务器根...
vue webpack build资源相对路径的问题及解决方法
10-15
在前端开发中，使用Vue.js框架结合Webpack作为模块打包工具是非常普遍的一种做法。Vue-cli工具提供了一个标准化的项目结构和配置，让开发者能够快速开始项目。但是，在使用Vue-cli创建项目后，如果需要对静态资源的...
vue webpack打包后图片路径错误的完美解决方法
10-17
这将使Webpack在生成资源URL时使用相对路径。例如： ```javascript module.exports = { //... output: { //... publicPath: './' } }; ``` 尽管做了上述更改，但CSS中的背景图片仍然可能无法正确加载，...
网站子目录部署VUE webpack 打包资源文件路径的正确引用方式1
08-03
在网站子目录部署Vue.js应用时，Webpack的打包资源配置至关重要，特别是对于资源文件路径的处理。Vue CLI生成的配置文件中，`publicPath`参数是关键，它定义了项目中所有资源的基础路径。例如，当应用部署在`...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue.js开发中，使用Vue CLI创建的项目通常会依赖Webpack进行构建和打包。Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际...
解决vue-cli webpack打包后加载资源的路径问题
10-17
本文将详细讲解如何解决Vue CLI与Webpack打包后资源路径问题。 首先，当你的Vue项目在打包后出现访问空白的情况，这通常是因为静态资源（如CSS、JS、ICO等）无法正确加载。问题可能出在`dist`目录的结构上。在默认...
vue+webpack 打包文件 404 页面空白的解决方法
11-30
综上所述，解决Vue+Webpack打包后404页面空白的问题，主要涉及到服务器配置（如Nginx的try_files规则）、静态资源路径设置（通过Vue CLI的`publicPath`）以及Babel的正确配置（`.babelrc`文件）。通过调整这些配置，...
webpack配置打包后图片路径出错的解决
08-27
在使用Webpack进行项目打包时，常见的一个问题是图片路径出错的问题。这个问题的出现是因为Webpack在打包时会对图片进行处理，导致图片的路径出错。本文将介绍两种解决该问题的方法。 问题描述 在开发环境下，项目...
webpack打包vue项目，资源从绝对路径改为相对路径以及css中的图片资源如何修改配置
起个类名好难的博客
05-01 1315
转载 https://www.cnblogs.com/LChenglong/p/10309501.html
vuecli4中配置打包使用相对路径
sun_chen_93的博客
07-29 1753
元气满满，直接干！ 使用vuecli4进行项目打包时，默认使用的是根目录的方式，这样打包直接项目直接运行就是一个大白屏，非常难受！ 这时我们就需要在设置打包使用相对目录的方式，设置过程非常简单。 1. 在vuecli跟目录下添加 `vue.config.js`作为配置文件 2. 添加以下配置： module.exports = { //配置 运行和打包时的文件路径 publicPath:process.env.NODE_ENV==='production'?'./':'/', devSer
vue webpack build资源相对路径
lewxiaolu的博客
06-03 2017
默认情况webpack+vue-cli打包的css、js等静态资源路径都是绝对的，即static在根目录下，如果部署到带有文件夹目录的项目中，资源路径就会出错。 如图： 解决方法: 在webpack.prod.conf.js中，output中添加或者修改为 publicPath: ‘./’； 这是修改了js，css引用地址，那么image引用地址呢？ 更改图片地址也为相对路径，修改build下，utils.js文件 ...
webpack打包原理_webpack打包原理入门探究（二）基本配置
weixin_39656174的博客
11-25 70
上面我们已经讲解过了 webpack打包原理入门探究（一），可以看看如下文章子由风：webpack打包原理入门探究（一）​zhuanlan.zhihu.com接着上一节课的目录来看看，这一节课的目录会有什么样的改变呢？新增了 dist，src/scripts，src/styles 目录第一步：先创建准备目录 dist(打包后存放的目录)，src/源代码存放的目录第二步：在根目录创建 webpac...
vue webpack 打包路径
最新发布
06-07
Vue CLI 使用 Webpack 进行打包，打包后的文件默认会生成到 dist 目录下。如果需要修改打包后的文件路径，可以在 vue.config.js 中进行配置。 例如，如果想要将打包后的文件生成到 dist/static 目录下，可以在 vue....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值