vue中index.html引入外部js，路由跳转失效解决方案

原创 已于 2026-01-18 20:35:15 修改 · 2.7k 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#javascript #vue.js #html5
于 2020-07-17 15:04:31 首次发布
本文探讨了在Vue项目中避免直接在index.html引入JS的方法，以及解释了Vue路由跳转后JS可能失效的原因。建议使用更合理的方式在组件或插件中引入JS，确保每次路由跳转都能正确加载和执行。

建议不要在index.html中引入js，参考解决方案可以在vue中引入外部js

vue中引入js
在这里插入图片描述
在这里插入图片描述

vue路由跳转js失效原因: 路由跳转后，当时js不会重新加载。

Vue路由跳转后 Index.html中引入的JS文件失效 问题解决
杨杨吖的博客
03-12 5144
原因：Vue路由跳转JS失效原因: 路由跳转后，当时JS不会重新加载。 解决方法：看下图代码： // 动态加载js文件 const jsArr = ["/static/vendor/bundle.js", "/static/dist/js/app.min.js"]; const head = document.getElementsByTagName("head")[0]; for(let i=0; i<jsArr.length; i++) { const script = do
vue项目分析--index.html+main.js+App.vue关系,前端路由的使用
weixin_46045444的博客
10-11 3665
main.js引入文件 https://www.cnblogs.com/chenleideblog/p/10484554.html https://blog.csdn.net/bujiongdan/article/details/81416100 app.vue是一个根组件，main.js 是一个入口文件，index.html是项目入口 index.html有的时候放在public文件夹下 app.vue里实际上就是定义了一个可以操作的vue模板区域，export default实际上就是把这个根组件暴露出
vue项目public文件夹下的index.html引入js刷新后失效问题（原问题——加载bim模型刷新页面js失效）
xuanshuo2的博客
01-11 2192
加载bim模型刷新页面js失效
index.html vue路由 挂载,实例详解vue 挂载路由到头部导航
weixin_42581003的博客
06-17 585
不知道大家对vue 挂载路由到头部导航有多少了解，本篇文章主要就介绍vue 挂载路由到头部导航的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。路由是写好了，但正确的切换路由方式不应该是我们在地址栏里面输入地址，有追求的方式是点击头部的导航菜单来切换，就像这样我们点击上面的发现、关注、消息就切换路由导航我们先把头部的导航写好打开header.vu...
vue二级路由跳转后外部引入js失效问题解决方案
dlpncgi56730的博客
05-23 1240
vue路由可以通过children嵌套，于是可以形成二级路由等等。。。 案例如下： routes: [ { path: '/', name: 'dy', component: dy, children:[ {path: '/', name: 'tdy', component: tdy }, {path: '/tdy', name: 'tdy', compo...
vue打包后index.html,Vue通过build打包后 打开index.html页面是空白的
weixin_31951989的博客
07-10 2413
最近在build打包vue项目遇到了几个问题，如下：1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是assetsPublicPath：'...
vue中打包之后访问index.html,Vue通过build打包后 打开index.html页面是空白的
weixin_39711867的博客
06-17 1864
最近在build打包vue项目遇到了几个问题，如下：1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是assetsPublicPath：'...
vue-cli3项目通过vue如何引入第三方js包完成登陆功能
i_am_a_div的博客
08-21 1888
注意：本次登陆，前后端分离；前端通过引入第三方的js包，调用js包里的初始化方法和提交方法完成登陆； 流程1.引入第三方包 1.1在index.html文件下引入 流程2.完成初始化 问题2.1因为初始化的时候，必须传递后端分配的state，用作验证。 当时做了几种传递state的方式，方式1：前端到了login页面后先请求借口获取state的值，然后传递给初始化的state，发现行不通（确实初始化赋值上去了分配的state，但是登陆失败，后端说不支持）； 流程3.拦截跳转： 最后采取方式2：前端在
（搭建构架3）Vue路由的配置和使用
weixin_46166949的博客
04-27 970
1、配置路由 使用了淘宝镜像的 cnpm install vue-router --save 或者未使用淘宝镜像的 npm install vue-router --save 以上两种都可以，后面加上–save 那么这个依赖就存在config.json了 ...
VUE index.html引用页面与VUE循环
yunmeikeji的博客
03-08 442
在vue中将新建的页面引用到index.html页面上和在vue中使用循环输出数组中的数据
vue路由切换组件没有加载_vue-router 路由跳转后没有加载组件
weixin_33497944的博客
02-22 1818
router.js 路由部分export const normalRouter = {path: '/',meta: {login: false},component: () => import('@/views/normal/home'),redirect: '/pagelist',children: [{name: 'normalPageList',component: () =>...
前端html引入的js文件无效,Vue在index.HTML中引入静态文件不生效问题及解决方法_百厌_前端开发者...
weixin_34546240的博客
06-03 3664
本文针对的是出现该问题的标志如下控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/出现的原因及解决办法第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把第二种可能出现的原因就是有单独的静态需要更改的有3个文件，分别是config文件夹下的index.文件夹下的w...
【vue】在index.html引入js文件失效解决方法
热门推荐
hggl_bera的博客
05-08 1万+
在static文件夹下写了一个config.js配置文件，但是引入后报错，提示没找到该文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg...
vue的index.html引入js或css文件刷新后失效问题
最新发布
qq_1401820561的博客
03-18 837
中通过相对路径引入静态资源（JS/CSS文件），可能会遇到页面刷新后资源加载失败的问题。A：浏览器开发者工具 → Network标签 → 查看资源请求URL。A：检查生产服务器是否正确配置history fallback。❌ 不够美观，不适用于对URL美观度要求高的项目。目录管理的资源由webpack自动处理。中手动引入的资源需要修改，通过。✅ 兼容性好，无需服务器配置。在Vue项目中，当使用 ​。刷新页面后浏览器控制台会报。错误，导致资源无法加载。以Nginx为例，添加。修改路由配置，切换为。
随手笔记：vue public文件夹index.html全局引入js
weixin_45116920的博客
05-22 3605
所以我们可以采用 Vue CLI 中的 变量，它是在Vue应用运行时动态生成的，可以用于自动计算出当前页面所在目录的绝对路径。在默认情况下，这个变量的值为"/"，代表着应用的根路径。例如，在当前页面的URL路径为"/example/my-page"时，如果使用相对路径引入静态资源，可能会导致资源无法正确地加载。绝对路径通常是固定的，并不支持动态计算路径，而Vue CLI的变量正是为了避免这种问题而设计的。
【vue】打包后，访问public文件的index.html，访问不到js和css，需要配置publicPath:“ “
weixin_43444977的博客
10-11 4888
在vue.config.js文件添加配置项publicPath，publicPath路径修改" "，dist文件下index.html即可找到。vue.config.js文件中publicPath路径为“/”，表示根目录下，是访问不到js和css文件的，vue项目打包后， index.html直接访问不到 css 文件和 js 文件；
Vue 在index.html引入外部js报错
as_64的博客
01-29 3239
**问题：** 在index.html中引入 ``` <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> ``` 但是在组件中使用时，出现 xxx is not defined ( no-undef )是Eslint检查搞得鬼 **解决办法：** 在src下新建一个.eslintrc.js，但是注意若已经在vue.config.js中配置了`lintOnSave:false`.
vue-路由详解
m0_64081601的博客
03-28 1541
1.Vue路由是Vue.js官方提供的一种前端路由管理方式，它可以实现单页应用（SPA）的页面跳转和组件切换，提供了一种优雅的方式来管理应用的URL。2.路由的基本概念：路由是指根据不同的URL路径，展示不同的内容或组件。在Vue中，可以通过Vue Router来实现路由功能。3.安装和配置Vue Router：首先需要通过npm安装Vue Router，然后在Vue项目中引入并使用Vue Router。配置包括定义路由规则、设置默认路由、配置路由参数等。
vue项目入门——index.html和App.vue
阿常的博客
04-02 4495
讲解vue项目入门——index.html和App.vue这两个文件
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SourceYang_A

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值