vue修改打包后静态资源路径

最新推荐文章于 2025-03-20 15:44:55 发布
转载 最新推荐文章于 2025-03-20 15:44:55 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5a334c9b51882506146ef564
文章标签：

#javascript #json #ViewUI

使用vue-cli生成的项目，打包方式是直接执行package.json里配置的脚本

npm run build

// 这步其实是去执行build下的build.js脚本文件
node build/build.js
复制代码

如果发布到服务器资源，该静态资源的路径都是默认在根路径下，大多数情况下是不符合期望的，还是希望放在指定位置。

这里只需要修改config文件夹下的生产环境配置文件prod.env.js

修改内容：

// 我们只需要修改编译后的环境，所以只要修改prod.env.js下的build属性下的assetsPublicPath属性
// 默认值是 "/" 根目录
// 我这里加了一级 "/mywebsite/"
// 最终页面上请求到的静态资源路径，比如css文件的地址就是：

http://www.***.cn/mywebsite/static/css/index****.css

复制代码

webpack打包路径更改_vue项目之webpack打包静态资源路径不准确
weixin_28673669的博客
01-14 842
摘自：https://blog.youkuaiyun.com/viewyu12345/article/details/83187815问题将打包好的项目部署到服务器，发现报错说图片找不到。静态资源如js访问不到分析并且解决问题明确一点的就是，看到报错404，找不到静态资源，很明显，路径错误了。静态资源找不到如js文件资源打包路径有误，打包后的资源使用了绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路...
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，默认显示的路径不对，打开肯定是空白的。 build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname
解决Vue打包之后文件路径出错的问题
11-29
这里以vue-cli创建的项目为例 1、文件路径不对 找到config文件夹下的index.js文件修改一下位置 看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/’改为‘./’ 2、背景图片路径不对 在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置 加入红框内字段即可。 以上这篇解决Vue打包之后文件路径出错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue 项目中vue.config所有配置详解
weixin_39273589的博客
08-26 6162
publicPath配置项用于指定构建打包后的静态资源的路径，默认值为'/'。在部署到服务器时，如果项目的静态资源（如CSS、JavaScript、图片等）的路径不是根路径，可以通过设置publicPath来指定正确的路径。assetsDir配置项用于指定静态资源（如CSS、JavaScript、图片等）的目录，默认值为空字符串''，表示静态资源将会输出在outputDir根目录中。在Vue项目中，可以使用vue.config.js文件来配置一些Vue项目的构建和开发配置。
vue修改打包后静态资源路径的修改
weixin_42467515的博客
03-05 825
vue修改打包后静态资源路径的修改
Vue 项目打包后路径问题的解决方法
有我更精彩的博客
03-20 1838
Vue 项目打包后路径问题通常由静态资源路径错误、路由路径错误、环境变量路径错误或publicPath配置错误引起。通过正确配置静态资源路径、Vue Router 的base选项、环境变量、publicPath配置以及使用相关插件，可以有效解决这些问题。希望本文的介绍能帮助你在 Vue 开发中更好地处理打包后的路径问题，确保项目在生产环境中的正常运行。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作📚《Vue.js 3企业级项目开发实战（微课视频版》
Vue打包后访问静态资源路径问题
10-16
Vue打包后访问静态资源路径问题的核心在于理解生产环境和开发环境的不同，以及正确配置静态资源的引用路径。通过修改`assetsPublicPath`、使用绝对路径、`require`引入或设置`publicPath`，可以有效解决这个问题。在...
Vue组件中解决打包后静态资源路径问题
最新发布
07-17
资源下载链接为： ...在 Vue 项目中，static 文件夹用于存放静态资源，例如图片、字体等。...通过以上两个步骤，可以解决 Vue 打包后静态资源路径错误的问题。感谢大家对软件开发相关知识的关注和支持！
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
Vue CLI 3.0 是一个基于 Vue.js 的命令行工具...以上就是关于 Vue CLI 3.0 打包静态资源找不到路径问题的解决方法和相关配置知识。确保正确配置 `publicPath` 并理解其他配置项的作用，有助于顺利部署和运行 Vue 项目。
vue和webpack打包项目相对路径修改的方法
01-19
一般vue使用webpack打包是整个工程的根目录，但是很多情况下都是把vue打包后的文件在某子目录下。 修改： 1，打开index.js assetsPublicPath:'/' 改为： assetsPublicPath: './' 2.解决css里面的路径问题，打开...
vue打包之后修改静态资源路径
WangYi0118的博客
10-22 2426
npm run build打包之后生成dist文件夹，访问index.html的时候控制台打印 1：修改build下webpack.prod.conf.js 2：修改build下webpack.base.conf.js 3：修改config下index.js 4：我的项目静态资源的位置在src下的assets文件夹里，引入了背景图打包之后不显示 修改build下utils.js ...
vue-element-admin实现build打包文件下改变每个静态资源的路径
vvv3171071的博客
10-28 2934
组长两句话说明的需求，其实也简单，就改一行代码。 打开vue.config.js，找到assetsDir，默认输出路径是’static’，改成你想要将静态资源输出到的路径就可以了。我改成了’home/static’ // assetsDir: 'static', assetsDir: 'home/static', 然后打包后的dist里的静态资源就放到了dist/home/static目录下 题外话：这样做好像是利于Nginx的部署啥的，等这几天忙完项目后好好请教一下原理吧，太菜了，还得更加努
vue项目打包后也能配置静态资源路径
weixin_39752673的博客
05-15 977
打包后config.json在打包目录的根目录下，而且可修改。为了确保正确赋值，需要watch一下config的值再赋值。
更改vue静态资源路径
猿是人类的好朋友
03-07 764
build: {})build: {},
vue项目设置打包后的静态文件访问路径
start_sea的博客
08-31 1万+
*啰嗦一下：**相同域名下可能会存在两份相关或不相关的代码，需要通过切换文件夹路径进入不同项目时，需要在项目打包输出代码时设置静态文件的访问路径（vue、react都要）。**静态文件访问路径说明：**项目的静态文件访问路径在本地运行和服务器访问是有区别的，默认状态下服务器上的项目代码，访问路径是从服务器根目录开始。vue项目的最终项目文件需要经过打包输出，静态文件的访问路径需要在vue.config.js文件中设置。**H5中的访问设置：**在H5中，静态文件访问路径的区别。...
vue3+vite打包配置，绝对路径改相对路径，更改静态资源目录
热门推荐
vayne_1的博客
05-26 2万+
vue3+vite打包配置，绝对路径改相对路径，更改静态资源目录
干货满满，解决vue打包后静态资源路径错误的问题，3个月学会前端开发
2401_83739434的博客
04-08 1743
2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js看代码：.*)?$/,options: {limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64},
vue项目打包需要修改的路径问题
知其白，守其黑；和其光，同其尘。
03-09 6448
博客园 首页 新随笔 联系 管理 订阅订阅 随笔- 55 文章- 0 评论- 1 vue-cli项目打包需要修改的路径问题 命令行输入：npm run build 打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。 第一个问题，文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问...
解决vue打包后静态资源路径错误的问题
2401_84435555的博客
04-27 2632
页面中引入资源的方式往往有如下几种* HTML标签中直接引入图片， 如* JS代码中定义资源路径属性，如* CSS代码中定义资源为背景图片，如上述三种资源加载方式还是有所区别的。前两种无论图片大小，都会使用url-loader加载器将其转化为base64编码的静态资源，而第三种方式则会根据webpack中配置的limit参数，动态选择符合大小要求的图片进行转码，此时则会导致不符合大小选择的图片加载失败，同时报出如下错误。
Vue3 vite打包静态资源路径
03-18
<think>好的，我需要帮助用户在Vue3项目中正确配置Vite的静态资源路径。用户提到了打包时路径的问题，并且引用了几个相关资料。首先，我需要理解用户的问题：他们想知道如何设置Vite的配置来确保静态资源路径正确，尤其是在打包后可能出现路径错误的情况下。 根据引用内容，用户提供的资料提到了在vite.config.js中配置base选项。例如，引用[1]和[2]都提到base选项控制静态资源的基路径。引用[3]则指出路径错误可能导致404，所以正确设置路径很重要。 接下来，我应该分步骤说明配置方法。首先，安装Vite和创建项目，但用户可能已经有项目了，所以这部分可以简化。然后，修改vite.config.js文件，加入base配置。根据环境不同，可能需要动态设置，比如开发环境和生产环境使用不同的路径。这里需要解释base的作用，以及如何设置为相对路径（./）或绝对路径（/assets/）。 另外，可能需要处理资源引入方式，比如在代码中使用正确的路径引用静态资源，比如使用import或绝对/相对路径。同时，部署时需要注意子目录的情况，比如如果应用部署在子目录下，base需要对应调整。 用户可能还会遇到图片路径问题，比如使用public目录和assets目录的区别。需要说明两者不同的处理方式，public下的文件直接复制，而assets中的会经过打包处理。这部分需要给出示例代码，比如在组件中引用图片的正确方式。 最后，确保用户了解不同环境下的配置，比如通过环境变量来设置base，这样可以在不同部署环境下灵活切换。同时，测试打包后的路径是否正确，可能需要运行本地服务器来验证。 在生成相关问题时，需要考虑用户可能进一步的问题，比如如何动态配置、处理图片路径、环境变量使用等。这些问题应该覆盖用户可能的后续疑问，帮助他们全面了解配置方法。</think>在Vue3项目中通过Vite配置静态资源路径时，需重点关注`base`参数设置和资源引入规范。以下是具体配置步骤及注意事项： ### 一、基础路径配置 1. **修改vite.config.js** ```javascript // vite.config.js import { defineConfig } from 'vite' export default defineConfig({ base: './', // 设置为相对路径（默认值） // base: '/your-subpath/', // 部署到子目录时使用 build: { assetsDir: 'static' // 自定义静态资源目录名称 } }) ``` * 相对路径模式`./`适用于本地直接打开dist文件[^2] * 绝对路径需根据部署环境配置（如GitHub Pages需设为仓库名） ### 二、资源引入规范 1. **组件内引入** ```javascript // 正确方式 import logo from '@/assets/logo.png' // 自动处理路径 const imgUrl = new URL('./img.png', import.meta.url).href // 动态路径 ``` 2. **CSS文件引用** ```css /* 自动解析相对路径 */ .background { background-image: url('./bg.jpg'); } ``` ### 三、特殊目录处理 | 目录类型 | 路径处理方式 | 适用场景 | |----------|------------------------------|--------------------| | /public | 直接通过`/filename.ext`引用 | 无需处理的静态文件 | | /assets | 经过打包处理并哈希化文件名 | 需要优化的资源文件 | ### 四、部署适配方案 1. **动态环境配置** ```javascript // vite.config.js export default defineConfig({ base: process.env.NODE_ENV === 'production' ? '/production-path/' : './' }) ``` 2. **子目录部署示例** ```javascript base: process.env.BASE_URL || './' // 可通过.env文件配置 ``` ### 五、验证配置结果 打包后检查dist目录结构： ``` dist/ ├─ static/ │ ├─ js/ │ ├─ css/ │ └─ images/ ├─ favicon.ico └─ index.html ``` 通过`npx vite preview`命令验证资源加载是否正常[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值