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

最新推荐文章于 2024-09-27 15:46:53 发布
原创 最新推荐文章于 2024-09-27 15:46:53 发布 · 1w 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #webpack

本文详细介绍了如何在使用Webpack和VueCLI打包项目时，解决由反向代理引起的绝对路径问题，通过修改配置实现资源文件的相对路径引用，并修复了css中图片路径的错误。

       在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子来看一下：

1、打包后的index.html文件

2、打包后的css文件

所以，如果在项目中需要使用相对路径来获取静态的资源文件，需要怎么做呢？

1、修改webpack配置文件中的assetsPublicPath，修改为如下图所示。

 修改配置后，进行打包发现，打包后的index.html文件中，对css等文件的调用，变成相对路径。

但是同时我们也会的发现这样修改后，导致打包后的css文件中，图片的路径出现问题，如下所示，图片路径出错导致图片找不到。

所以仍需进一步修改配置，使其变成如下路径： 

.iradio_flat-yellow{background-image:url(../../static/img/yellow@2x.04850a2.png);

 

2、 处理图片路径问题

在webpack对ExtractTextPlugin插件配置的地方，加入如下代码（具体值可能有变化，依据自身项目打包后文件路径关系确定）

再次打包，发现问题解决

解决vue单页面应用打包后相对路径、绝对路径相关问题
11-20
在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子来看一下： 1、打包后的index.html文件 2、打包后的css文件 所以，如果在项目中需要使用相对路径来获取静态的资源文件，需要怎么做呢？ 1、修改webpack配置文件中的assetsPublicPath，修改为如下图所示。 修改配置后，进行打包发现，打包后的index.html文件中，对css等文件的调用，变成相对路径。 但是同时我们也会的发现这样修改后，导
vue打包相对路径和绝对路径
易之晓的博客
09-21 2962
主要该两个地方
vuecli2打包时的绝对路径以及相对路径
zhangzez123的博客
09-17 2574
打包命令： npm run build 1.相对路径： 找到config下的index.js中build的属性 build: { assetsPublicPath: '/', //绝对路径 // assetsPublicPath: './', //相对路径 } 打包完后的绝对路径 打包完后的相对路径 到此结束，发文章方便以后查询。注意在config中有俩个属性一个是dev，另一个是build，dev这个是在vuecli服务器跑的路径，另一个build的是打包完的路径 ...
vue build 相对路径 如何变成绝对路径_vue项目打包步骤
weixin_39547298的博客
12-12 1797
vue项目打包一、终端运行命令 npm run build二、打包成功的标志与项目的改变，如下图：3、点击index.html，通过浏览器运行，出现以下报错，如图：四、那么应该如何修改呢？具体步骤如下：1、查看package.js文件的scripts命令2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl...
多页vue应用的单页面打包方法(内含打包模式的应用)
11-20
【标题】: 多页Vue应用的单页面打包方法及应用 【描述】: 在构建多页Vue应用时，有时需要对单个页面进行独立打包，以满足不同服务器部署的需求，避免资源冗余。传统的多页应用通常将所有页面打包成一个整体，但这...
关于Vue背景图打包之后访问路径错误问题的解决
08-28
Vue背景图打包之后访问路径错误问题的解决 在 Vue 项目中，背景图打包之后访问路径错误的问题是很常见的。这个问题的出现是因为 url-loader 的配置对图片的限制大小过小造成的。当图片小于 10KB 时，url-loader 会...
精选资源
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
vue打包后css路径_vue打包后引入js和css用相对路径引入
weixin_39598954的博客
12-22 1498
vue打包后html引入的js和css默认是绝对路径的，如下：现在需要打包后是这样的：需要怎么配置呢？查看文档说把publicPath设置为'./'就可以了 ，但设置后还是不行，还是绝对路径，设置为'./static/'后,打包生成的是：它好像是把'./'给去掉了，于是我就有个大胆的想法：将publicPath设置为：'././'试一试 果然可以了。咋子回事嘛？在方法loadUserOptions...
vue build 相对路径 如何变成绝对路径_微服务和VUE(27)：VUE前端工程打包
weixin_39992957的博客
12-12 1048
1. 介绍在我们完成代码编写之后，肯定是要把前端和后端 部署到服务器上面的，因此在部署之前，我们需要先打包我们的项目文件。VUE工程打包很方面，在工程目录下运行：npm run build若不报错，就成功了。一般不会报错，当然第一次打包的时候，我也遇到了一些错误，笨笨的我不知道如何解决，直接重新建了一个新的工程，把原来的文件该复制的复制，很神奇的就ok了。在打包之后，会新生成dist文件...
vue build 相对路径 如何变成绝对路径_Vue2.0 打包 build 前需要修改哪些配置和路径...
weixin_39932330的博客
12-12 2092
找到打包配置文件 "config/index.js"下的build，先让我们了解一下属性修改build.index和assetsRoot的值；配置项目打包路径：'../dist‘；配置入口文件：'../dist/index.html'；配置资源文件路径：'../dist'；配置资源文件在项目中的引用【相对路径】："./"；第一：config文件夹下的index.js 中的文件中的 ass...
Vue打包为相对路径
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-27 2670
对于更复杂的部署需求，可以编写自定义脚本来处理资源路径。通过上述内容，我们不仅了解了如何在Vue项目中配置打包输出的资源文件路径为相对路径，还学习了如何解决常见的问题及一些实用的技巧。希望这些内容能够帮助你在实际开发中更好地管理和配置应用的资源路径。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
webpack打包vue项目，资源从绝对路径改为相对路径以及css中的图片资源如何修改配置
起个类名好难的博客
05-01 1579
转载 https://www.cnblogs.com/LChenglong/p/10309501.html
vue打包后css路径_解决vue单页面应用打包后相对路径、绝对路径相关问题
weixin_39805364的博客
12-22 1176
在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子来看一下：1、打包后的index.html文件2、打包后的css文件所以，如果在项目中需要使用相对路径来获取静态的资源文件，需要怎么做呢？1、修改webpack配置文件中的ass...
Vue_cli项目打包-配置相对路径
weixin_46096901的博客
05-11 3547
vue_cli打包后的项目，默认使用的是绝对路径，找根目录下的文件 当放在服务器根目录时（只有一个项目），使用绝对路径/，是没有问题的 服务器有多个文件夹（项目）时，就需要使用相对路径./ 在项目根目录，新建一个vue.config.js文件 module.exports = { publicPath: './', } ...
vue -- a标签href:路径拼接
King Saj
03-23 3408
<a :href="'repository-model-detail.jsp?id='+item.id">{{item.name}}</a> <a :href="'repository-details.jsp?docid='+item.docid+'&table='+item.classify">{{item.name}}</a>
webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
weixin_33921089的博客
09-04 610
资源相对引用路径 问题描述 一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。 但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。 解决办法 打开webpack.prod.conf.js 找到output：增加 ...
VUE Build的时候绝对路径变成相对路径
qq_34452824的博客
07-10 1637
https://blog.csdn.net/sunshine1990916/article/details/84583230
Vue进阶（七十五）：相对路径和绝对路径
IT全栈 华强工作室
09-16 8918
绝对路径：是从盘符开始的路径，形如 C:\windows\system32\cmd.exe 所谓的绝对路径就是完整的路径。 相对路径：是从当前路径开始的路径，假如当前路径为C:\windows 要描述上述路径，只需输入 system32\cmd.exe 实际上，严格的相对路径写法应为 .\system32\cmd.exe 其中，.表示当前路径，在通道情况下可以省略，只有在特殊的情况下不能省略。 假...
vue单页面应用 worker路径 怎么管理
最新发布
11-05
<think>我们正在讨论Vue单页面应用（SPA）中管理Web Worker路径的问题。 在Vue中，由于项目通常使用Webpack等构建工具，且文件路径在开发和生产环境中可能不同，管理Worker路径需要注意以下几点： 1. **开发环境和生产环境的路径差异**：在开发时，文件可能位于根目录，而生产环境可能部署在子路径。 2. **构建工具的处理**：Webpack会处理模块路径，但Worker文件可能需要特殊配置。 3. **Worker文件的放置**：通常将Worker文件放在`public`目录（不会被Webpack处理）或`src`目录（会被Webpack处理）。 4. **创建Worker的方式**：根据文件位置选择不同的引入方式。 解决方案： ### 方法1：将Worker文件放在`public`目录（推荐静态文件使用） - 将`worker.js`文件放在项目`public`目录下（Vue CLI创建的项目默认有public目录） - 在代码中通过绝对路径引用（相对于域名根路径）： ```javascript // 在Vue组件中 const worker = new Worker('/worker.js'); ``` - 优点：文件路径简单，不会经过Webpack处理。 - 缺点：无法在Worker中使用模块导入（如`import`语句）。 ### 方法2：将Worker作为模块导入（Webpack处理） - 使用`worker-loader`（Vue CLI内部已继承，可通过配置使用） - 步骤： 1. 安装依赖（如果Vue CLI版本低于5，可能需要单独安装）： ```bash npm install worker-loader --save-dev ``` 2. 在`src`目录下创建Worker文件（例如`src/workers/myWorker.js`） 3. 在组件中通过导入方式创建： ```javascript import Worker from 'worker-loader!@/workers/myWorker.js'; const worker = new Worker(); ``` - 注意：Vue CLI项目默认配置了`worker-loader`，但需要确保文件路径正确。 ### 方法3：动态路径处理（解决部署路径问题） - 如果应用部署在子路径（如`https://example.com/my-app/`），需要动态设置路径： ```javascript const workerPath = process.env.BASE_URL + 'worker.js'; const worker = new Worker(workerPath); ``` - 在Vue CLI项目中，`process.env.BASE_URL`对应`vue.config.js`中的`publicPath`。 ### 方法4：使用Blob动态创建（避免路径问题） - 将Worker代码作为字符串，通过Blob创建： ```javascript const workerCode = ` self.onmessage = function(e) { console.log('Worker received:', e.data); postMessage('Work done!'); }; `; const blob = new Blob([workerCode], { type: 'application/javascript' }); const worker = new Worker(URL.createObjectURL(blob)); ``` - 优点：完全避免路径问题。 - 缺点：代码维护困难，无法享受模块化。 推荐做法： - 对于简单Worker，使用方法4（动态Blob）或方法1（public目录）。 - 对于复杂Worker（需要模块化），使用方法2（worker-loader）并配置Webpack。 --- §§相关问题§§ 1. 在Vue CLI项目中如何配置`worker-loader`以实现特定Worker文件的加载？ 2. 如何解决Web Worker中无法使用`importScripts`加载位于`public`目录的脚本问题？ 3. 当Vue应用部署在子路径下时，如何确保Worker文件的路径正确？ 4. 使用`worker-loader`时，如何实现Worker的热更新（HMR）？ </think>在 Vue 单页面应用 (SPA) 中管理 Web Worker 路径需特别注意构建工具和部署环境的影响，以下是关键实践方案： ### 最佳路径管理策略 1. **静态文件托管（推荐）** ```javascript // 将 worker.js 放在 public 目录（Vue CLI/Vite 默认位置） const worker = new Worker(`${process.env.BASE_URL}worker.js`); ``` - 优点：文件不经过打包，路径固定 - 路径变量：`process.env.BASE_URL` 自动适配 `vue.config.js` 中的 `publicPath` 2. **模块化导入（需构建配置）** ```javascript // 安装 worker-loader（Vue CLI） // vue.config.js module.exports = { chainWebpack: (config) => { config.module .rule('worker') .test(/\.worker\.js$/) .use('worker-loader') .loader('worker-loader') } } // 组件中使用 import MyWorker from './scripts/my.worker.js'; const worker = new MyWorker(); ``` 3. **动态路径生成（SSR兼容）** ```javascript const getWorker = () => { if (import.meta.env.SSR) return {}; // 服务端渲染兼容 return new Worker(new URL('./worker.js', import.meta.url)); }; ``` ### 部署注意事项 | 场景 | 处理方案 | 示例路径 | |------------|----------------------------------|----------------------------| | 根域部署 | 直接使用绝对路径 | `/worker.js` | | 子路径部署 | 配合环境变量 `BASE_URL` | `${baseUrl}/static/worker.js` | | CDN托管 | 使用完整URL | `https://cdn.com/worker.js` | ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值