vue项目public文件夹下的index.html引入js刷新后失效问题（原问题——加载bim模型刷新页面js失效）

最新推荐文章于 2024-05-14 19:49:44 发布
最新推荐文章于 2024-05-14 19:49:44 发布
阅读量1.9k 收藏 4
点赞数 3
分类专栏： vue js bim 文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuanshuo2/article/details/122424235
版权
vue 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏
bim
1 篇文章 0 订阅
订阅专栏

做法：在index.html引入的时候，将相对路径转换成绝对路径

相对路径：

<link href='./lib/gelanderV2/Cesium/Widgets/widgets.css' rel='stylesheet'>
<script src='./lib/gelanderV2/Cesium/Cesium.js'></script>
<script src='./lib/gelanderV2/Cesium/BIMGISEngine.js'></script>
<script src='./lib/gelanderV2/Cesium/CADEngine.min.js'></script>

绝对路径：

<link href='/lib/gelanderV2/Cesium/Widgets/widgets.css' rel='stylesheet'>
<script src='/lib/gelanderV2/Cesium/Cesium.js'></script>
<script src='/lib/gelanderV2/Cesium/BIMGISEngine.js'></script>
<script src='/lib/gelanderV2/Cesium/CADEngine.min.js'></script>

亲测，有效！！！

xuanshuo2
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue引用外部JS的两种种方法
10-15
主要介绍了vue引用外部JS的两种种方案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
【vue】打包后，访问public文件的index.html，访问不到js和css，需要配置publicPath:“ “
weixin_43444977的博客
10-11 4155
在vue.config.js文件添加配置项publicPath，publicPath路径修改" "，dist文件下index.html即可找到。vue.config.js文件中publicPath路径为“/”，表示根目录下，是访问不到js和css文件的，vue项目打包后， index.html直接访问不到 css 文件和 js 文件；
解决springboot+vue静态资源刷新后无法访问的问题
最新发布
一只没有脚的鸟
05-14 652
原项目是有前后端分离设计，测试环境是centos系统，采用nginx代理和转发，项目正常运行。 项目近期上线到正式环境，结果更换了系统环境，需要放到一台windows系统中，前后端打成一个jar包，然后做成系统服务。这台服务器中已经有很多其他服务，都是采用一样的部署方式，所以没办法只能对这个项目进行修改。
Vue在public文件夹下配置全局变量时，刷新页面失效
weixin_45283339的博客
03-08 2471
在public文件下定义全局变量， 在接口服务中使用 npm run build 后生成的dist包， 可以直接对config.js文件修改部署不同的环境 ，避免多次打包 1、在public文件夹下 配置全局 config.js 文件 文件内容如下： var CONFIG = {} CONFIG.name = 'Jack' 2、在 同级 index.html文件 引入 <script src="./config.js"></script> 3、在页面上使用 let name =
vite创建vue3项目页面引用public下js文件失败解决
夏日漱石的博客
09-13 4161
📢vite创建vue3项目页面引用public下js文件失败解决
vue中index.html引入外部js，路由跳转失效解决方案
SourceYang_A的博客
07-17 2446
建议不要在index.html中引入js，参考解决方案可以在vue中引入外部js 声明：每人的思路不同，解决方案不同 这里是作者的解决方案 vue中引入js vue路由跳转js失效原因: 页面刷新，当时js不会重新加载。 ...
一文解决 Vue 引入外部的 js 文件时失效问题
南淮北安的博客
06-17 1万+
文章目录一、问题引入二、问题分析与解决 一、问题引入 这是 user.js 的内容： new Vue({ el: "#app", data: { message: "hello vue...." } }); 感觉没啥问题，但是就是显示不出来： 二、问题分析与解决 下面列下常见的错误： （1）注意路径的写法： （2）注意对于 use.js 的加载顺序应该放在 vuejs 和 axios 之后或者参考（4）引入参数defer 或者 async： （3）对于引入文
【vue2】项目打包问题解决-js/css文件无法引用问题
Ma_Zhen_的博客
08-05 1782
使用vue-cil进行打包后，打开html文件，控制台报错，引入js/css文件失败。 （此项目没有创建多余文件，仅仅在index.html文件中引入了js和css文件）
html页面动态加载数据刷新页面,JS中利用localStorage防止页面动态添加数据刷新后数据丢失...
weixin_31212247的博客
06-04 655
非常不多说了，直接给大家贴代码了，具体代码如下所示：Document555555555555buttonvar arrary_li = document.querySelectorAll("li");var num;$('button').on('click', function () {$('li').last().addClass('active')for (var i = 0; i <...
vue重新进入页面，js不加载
lxuanz的博客
12-01 832
vue页面加载问题
vue项目 index.html 引入静态资源，刷新页面问题。
qq_38743783的博客
05-17 3352
<script src="https://cdn.jsdelivr.net/npm/jsencrypt@3.2.1/bin/jsencrypt.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script> 项目中引入这两个cdn。但是这两个cdn 都挂完了，后来改成了本地引用。在 pubilc 文件夹下 创建了s
Vue踩坑之二级路由下静态资源加载失败
weixin_44735933的博客
03-11 2866
在使用vue开发过程中意外发现 , 当我的路由加到二级时我的页面背景突然没了? 这是怎么回事呢? 让我们先来复现一下问题吧 起初我的登陆页面的路由是这样子的 我的背景图片是在外部的一个css中写着的 这个外部css文件我是在index.html中全局引入的 , 按理来说 , 在全局引入了css , 那么我的所有组件 , 所有路由都应该可以访问到我自己写的这个css的内容的 , 也就是说我不管写什么路径都应该可以看到自己的背景图片的 给大家先看下我的index.html文件中是怎么引入的这个外部css
vue index.html引入js报错,vue如何引用其他组件(css和js)
weixin_42317885的博客
06-15 2505
1.vuejs组件之间的调用components注意：报错Do not use built-in or reserved HTML elements as component id:修改组件的名字，例如不能使用address为组件名字组件名字不要使用内置的或保留HTML元素为组件id，App.vue是一个入口，vue必须注册才能使用 2.vue引入外部的css，放在和引入vue的位置一样./代表当...
vue index.html 引入外部 js
tang_jian_dong的博客
05-27 3363
有时候需要引入外部js, 或者需要全家依赖的js, 可以在index.html 中引入： 如下红色框： /是指的assetsPublicPath 指的 代表打包后，index.html里面引用资源的的相对地址。 参考博客：https://blog.csdn.net/weixin_33920401/article/details/87962115 ...
vue在index.html中引入静态文件找不到
xm_w_xm的博客
05-15 1531
我在index.html 引入了一个js,在其他的组件中用window获取显示undefined webpack.dev.conf.js webpack.prod.conf.js index.js
vue中在index.html和main.js中引入第三方js库
早晚的博客
09-09 3278
第一种方法： 静态资源文件放在static文件夹下自己创建一个文件夹 // 在index.html文件下引入注意不要写./ <script type="text/javascript" src="static/js/xxxx.js"></script> 第二种方法： 在src文件夹底下创建一个文件夹utils 把你需要的文件引入到这个里面。 然后在main.js文件夹下做以下操作 ```js import name from "../utils/xxx" Vue.prototyp
随手笔记：vue public文件夹index.html全局引入js
weixin_45116920的博客
05-22 2934
所以我们可以采用 Vue CLI 中的 变量，它是在Vue应用运行时动态生成的，可以用于自动计算出当前页面所在目录的绝对路径。在默认情况下，这个变量的值为"/"，代表着应用的根路径。例如，在当前页面的URL路径为"/example/my-page"时，如果使用相对路径引入静态资源，可能会导致资源无法正确地加载。绝对路径通常是固定的，并不支持动态计算路径，而Vue CLI的变量正是为了避免这种问题而设计的。
html5更改项目路径,Vue项目中index.html中的相对路径，打包后未变成绝对路径如何修改...
weixin_35750483的博客
06-16 657
在webpack.base.conf.js中resolve:{extensions:['.js','.vue','.json'],alias:{'vue$':'vue/dist/vue.esm.js','@':resolve('src'),'static':path.resolve(__dirname,'../static')//添加这...
html页面中引入js的三种方式--动态引入js
热门推荐
醉过方知酒浓
03-03 2万+
方式一：在某个标签或元素内引入js片段，如下：             必须是日期格式（如yyyy-MM-dd）：                             value="" />                            方式二：向html页面中引入js代码块，如下；        function  aaa(){
vue中public下的index.html页面如何调用组件的方法
09-08
在Vue.js中，public目录下的index.html页面不直接调用组件的方法。因为index.html是一个静态页面，而组件方法是在Vue实例中定义和调用的。 要调用组件的方法，我们需要在Vue实例中使用组件，并在Vue实例中调用组件的方法。例如，在main.js或者其他Vue文件中，我们可以通过import导入组件，然后在Vue实例中进行注册和使用。 假设我们有一个HelloWorld组件，其中定义了一个名为sayHello的方法。我们可以按照以下步骤调用该方法： 1. 在Vue组件中，首先需要导入HelloWorld组件: ```javascript import HelloWorld from './components/HelloWorld.vue' ``` 2. 在Vue实例中注册HelloWorld组件： ```javascript new Vue({ el: '#app', components: { HelloWorld }, template: '<HelloWorld/>' }) ``` 3. 在需要调用sayHello方法的地方，可以通过ref属性给组件指定一个引用名称： ```html <template> <div> <hello-world ref="myComponent"></hello-world> </div> </template> ``` 4. 在需要调用sayHello方法的地方，可以通过this.$refs来获取组件的引用，并调用组件的方法： ```javascript methods: { callSayHello() { this.$refs.myComponent.sayHello() } } ``` 在以上代码中，通过this.$refs.myComponent可以获取到我们在模板中指定的组件引用名称，然后就可以调用该组件的sayHello方法了。 需要注意的是，以上方法适用于在Vue组件中调用其他组件的方法。如果想在index.html页面中直接调用组件的方法，则需要通过DOM操作来实现，不建议这样做。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值