vite 修改打包后页面引用js的地址

最新推荐文章于 2024-05-28 11:16:05 发布
最新推荐文章于 2024-05-28 11:16:05 发布
阅读量1.8k 收藏
点赞数 2
分类专栏： vue vite 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43548590/article/details/124554468
版权

Vite CDN OSS 打包优化 JS引用
关键词由CSDN通过智能技术生成
vue 同时被 2 个专栏收录
37 篇文章 3 订阅
订阅专栏
vite
3 篇文章 0 订阅
订阅专栏

vite 修改打包后页面引用js的地址

需求：页面引入js过慢。需要吧打包后的js上传到oss使用CDN加速就需要修改打包后js引入地址
官方文档：https://vitejs.cn/config/#base

使用base来定义

在这里插入图片描述

例：在这里插入图片描述

部署成功之后就能就能发现引用地址变成了自己指定的地址
在这里插入图片描述

落魄实习生
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3+vite打包配置，绝对路径改相对路径，更改静态资源目录
vayne_1的博客
05-26 2万+
vue3+vite打包配置，绝对路径改相对路径，更改静态资源目录
vue打包后的静态文件上传到CDN，如何设置静态文件域名？
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
07-30 4262
在搞资源文件全球加速时需要将 JS,CSS,IMG 等静态资源放到 CDN 服务器上，WEB 网站上引用CDN 上缓存的资源，因为网站用vue-cli 搭建的，所以需要对 vue-cli 配置文件 (vue-config-js) 进行修改，修改打包后的index.html中静态资源引用路径。 vue.config.js module.exports = { publicPath: process.env.NODE_ENV === "production" ? "https://resource.xxx.
vite+js配置
最新发布
yuzheh521的博客
05-28 460
看看有没有jsconfig.json文件和src文件同级，没有就新建一个，然后把代码粘贴进入，配置就完成了。
前端笔记11——修改VUE CLI的入口文件main.js的路径（vue.config.js）
weixin_42844704的博客
05-04 5913
因为练习需要，VUE创建一个脚手架后，需要做很多不同的练习，不可能每一个小的练习都创建一个新的脚手架，所以就复制一份src文件夹，然后把原来做过的src改名。因为VUE CLI默认只识别src目录下的main.js。这样，问题就来了，每次都要改将之前该过名的目录改回src才能运行。 能不能不改文件的名称，VUE自动识别去运行自己想要的目录呢？ 在网上查了一些资料后，终于找到方法了，就是修改默认的入口文件路径，这个配置在哪里设置呢？答案在根目录下的vue.config.js配置文件上。 初始默认vue.con
vite配置相对引入
lgldl的博客
05-04 3255
以格式导入/@/xxx，不能以@开头，因为@被认为是软件包 vite.config.js module.exports = { alias: { '/@/': path.resolve(__dirname, './src'), } };
index页面通过＜script＞引入根目录下的js文件后，vite打包项目后，项目中无js文件解决方法
qq_51196135的博客
07-28 1958
打包无法打入根目录下的js文件，解决代码！
vite 项目配置
qq_39750019的博客
06-25 1939
1.期初的项目目录 2.安装typescript的类型声明文件 yarn add @types/node -D 初始化后的项目会生成一个vite.config.ts文件,这个文件等同于使用vue-cli创建的项目中的vue.config.js 通过配置alias来定义路径的别名,配置完以后我们打开App.vue 把之前的HelloWorld组件的引用由./components/HelloWorld.vue改为coms/HelloWorld.vue 页面正常显示,我们的 路径别名 就配置成功 2.np
vue3+vite 组件打包
04-16
2. **热模块替换 (HMR)**：Vite 的HMR非常高效，修改代码后仅更新变动的部分，提升开发效率。 3. **插件体系**：Vite 支持丰富的插件，如vite-plugin-vue、vite-plugin-eslint等，扩展其功能。 4. **配置文件 (vite....
vite-vue2-demo:vite vue2 demo, 开发环境使用vite，打包使用webpack
05-15
1. **即时重载**：Vite在开发时会监听文件变化，无需手动刷新浏览器，修改后的代码可以实时更新到页面。 2. **模块热替换（HMR）**：当组件或模块发生变化时，Vite仅需替换变动部分，保持应用状态。 3. **按需编译**...
vue打包后显示空白正确处理方法
08-28
- 当 Vue 应用打包后，静态资源的引用路径可能需要根据部署的实际情况进行调整。在 `vue.config.js` 文件中，可以设置 `publicPath` 属性来指定资源的基础路径。例如，如果打包后的文件需要在本地文件系统中直接...
解决Vue 项目打包后favicon无法正常显示的问题
12-07
然而，在使用Vue.js框架构建项目时，可能会遇到打包后favicon图标无法正常显示的问题。这个问题通常与资源路径配置有关，尤其是在使用本地图片作为favicon时。下面将详细探讨问题的根源，以及提供一种可行的解决方案...
vite-plugin-sri:一个Vite插件，可在构建时向您的index.html添加子资源完整性哈希
03-31
@ small-tech / vite-plugin-sri （SRI）插件。 在构建时，将子资源完整性哈希添加到从index.html文件导入的脚本和样式表中。 安装 npm i --save-dev @small-tech/vite-plugin-sri 采用 在您的vite.config.js文件中： import { defineConfig } from 'vite' import sri from '@small-tech/vite-plugin-sri' export default defineConfig ( { // … plugins : [ sri ( ) ] } ) 然后： npx vite build 测试与覆盖 运行npm test进行测试， npm run coverage以运行coverage。 也可以看看 如果您正在寻找一种可以完成相同
关于Vue背景图打包之后访问路径错误问题的解决
08-28
2. 修改 url-loader 的 limit 值（不建议）：可以将 limit 的值改为背景图最大那一张的值还大一点，但这并不是一个良好的解决方案，因为它会将所有图片都转换为 base64 格式，增加 js 文件的体积。 3. 将 CSS 不要...
修改vue中的挂载页面（index.html）的路径
weixin_30673715的博客
07-25 2502
修改vue中的挂载页面（index.html）的路径 2019年03月30日 12:07:12VegasLemon阅读数 501 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/VegasLemon/article/details/88910013 vue中的挂载页面index.html路径...
【vite】配置vite打包入口
热门推荐
夜雨Gecer的博客
07-26 2万+
项目目录 vite的配置都在根目录下面的vite.config.ts里面，在没有对其进行打包配置时，默认的打包的入口就是根目录的【index.html】。这时候我们直接运行 npm run build就会打包相应的文件： （ps：为什么默认是.html文件那？因为vue是单页面应用也就是最后打包的html只有一个。vite也提供多入口，但我不再本文继续描述了） 但是如果我们的目录结构改变了 ，比如： 在此时打包就会报错： Could not resolve entry modu...
vue3+vite构建的项目在本地没问题，打包部署到线上接口请求返回dist文件下的index.html内容
weixin_45531945的博客
08-26 1629
本地开发接口请求正常，线上接口请求有问题多半是服务器上的nginx问题。
记录一下搭建vue项目遇到的问题
开开心心，努力生活
06-10 1740
一、index.html页面无法渲染 我们都知道vue项目入口是由main.js、app.vue、index.html三者组合而成的，具体的逻辑就是webpack将main.js、app.vue打包成一个js，然后再将js插入到index.html中。如果main.js是默认路径，那没有问题。但是我们有时候会想要修改main.js的路径，方便我们代码的管理。如果没有修改webpack配置，那首先会找不到main.js然后项目启动起来后，index.html是为空的。这个问题去修改vue.config.js的
vue修改index.html无效,vue在index.html中引入静态文件不生效问题及解决方法
weixin_42503813的博客
06-04 1807
本文针对的是Vue小白，不喜勿喷，谢谢出现该问题的标志如下控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html)出现的原因及解决办法第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把资源引入静态资源的目录static第二种可能出现的原因就是有单独的静态资源...
Vue3 + Vite 打包优化及配置
qq_30379395的博客
12-01 4637
本文如果有错误和不足之处，欢迎大家在评论区指出，多多提出您宝贵的意见！github地址。
vite打包后页面空白
04-30
出现页面空白的情况可能会有多种原因，以下是一些常见的解决方法： 1. 确认是否正确配置了 Vite 的构建选项，如 publicPath、base、assetsDir 等。 2. 检查是否存在语法错误或者其他代码问题，可以使用开发者工具进行调试和排查。 3. 确认是否正确引入了相关的依赖包和资源文件，例如 CSS、图片等。 4. 检查浏览器是否存在缓存，可以清除浏览器缓存或者在开发者工具中禁用缓存。 5. 如果使用了异步加载组件，可以检查是否正确配置了 webpackChunkName。 6. 如果使用了服务端渲染，可以检查是否正确配置了相关的选项。 如果以上方法都没有解决问题，可以尝试使用 Vite 的 debug 模式进行调试，具体可以查看 Vite 官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值