vue项目，在不同的环境下，index.html中加载不同的js文件

最新推荐文章于 2024-04-29 17:01:02 发布
最新推荐文章于 2024-04-29 17:01:02 发布
阅读量1.2k 收藏
点赞数 1
文章标签： javascript vue.js html 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yixiancheng/article/details/127411471
版权
//根据环境变量，设置在开发环境下不加载指定的js文件
<head> 
  <% if(process.env.NODE_ENV !== "development"){%>
  <script async src="https://map.sgcc.com.cn/api/epgis-js-1.5.0.min.js"></script>
  <link href="https://map.sgcc.com.cn/api/epgis-1.5.0.css" rel="stylesheet" />
  <%} %>
</head>
yixiancheng
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
http-vue-loader：从您的htmljs加载.vue文件
02-03
:warning: Vue3支持： : :warning: http-vue-loader 直接从html / js加载.vue文件。 没有node.js环境，没有构建步骤。 例子 my-component.vue < template> < div xss=removed>Hello {{who}}</ div> </ template> < script > module . exports = { data : function () { return { who : ' world ' } } } </ script > < style > .hello { background-color : #ffe ; } </ style > index.html <!doctype html > < html lang =" en " > < head > < script src =" https://unpkg.com/vue " > </ scri
VUE项目根据不同环境引入js
znb769525443的专栏
04-03 2680
最近采用VUE做客服相关的系统，由于依赖第三方js，因此需要根据不同环境引入js。 比如在外网引入a.js，在内网引入b.js，该场景可根据不同需求而调整。 中间尝试了一些方法，都不行，当然，加载该js需要在VUE初始化之前，不然会导致系统加载不了相关方法。 思考在三，决定从VUE的index.html文件着手。通过vue-cli生成的项目的index.html文件如下： <!DOCTYPE html> <html lang="en"> <head>
http-vue-loader-直接从您的html / js中加载.vue文件，而无需使用node.js环境或构建步骤。-Vue.js开发
05-27
http-vue-loader直接从您的html / js加载.vue文件。 没有node.js环境，没有构建步骤。 示例my-component.vue 您好{{who}} .hello { background-color: #ffe; } index.html
vue2 cdn 加载html,vue2 项目中index.html页面如何根据不同的环境引入不同的CDN文件...
weixin_31938727的博客
06-07 739
偶然的你(function() { var jssrc = '' if(ua.match(/MicroMessenger/i)=="micromessenger"){ jssrc='xxx/a.js' } else { jssrc =...
vue - vue的index.html中获取环境变量和业务判断
qq_43886365的博客
04-20 6459
vue的index.html中获取环境变量和业务判断
vue index.html根据环境变量加载不同js及如何使用全局变量
Maxiaobai_ing的博客
08-20 2360
vue index.html根据环境变量加载不同js及如何使用全局变量 vue中静态html使用loash template使用全局变量 // An highlighted block <% if (process.env.NODE_ENV === 'production' ) { %> <!-- 内网地图 --> <script src="1.js" ></script> <% } %> <% if (process.env.NODE_EN
关于vue-cli3.x/4.x静态入口页面index.html根据开发 、测试、生产环境内容变化的处理（2020.3）
fangfangtulk的专栏
06-10 696
本篇介绍或者说记录一下2020年3月用到的一个知识，index.html根据不用环境变化内容。场景：外部插件只能在index.html中引入，且开发、测试环境引入的地址与生产环境不一样处理：1、检查环境的配置：src\config\的环境配置，例如env.js，代码如下： 2、打开public/index.html，在需要切换内容的地方处理，例如： 这种方法可以引用vue工程本身的环境配置，而且编码简单，易用。...
vue不同环境载入不同的js和css（CDN挂掉、失败后使用本地资源）
词不达意难知的博客
12-23 1758
优化项目资源请求量 规避掉在发布环境不需要的资源包 在index.html文件中 <script> // 举例 项目发布地址是 baidu 测试地址是 testbaidu // 通过检查路由地址来判断环境 从而控制引入文件 if (location.href.indexOf('testbaidu') > -1 ) { document.write('<script src="https://cdn.bootcdn.net/ajax/libs/vCon
Vue中index.html、main.js、App.vue、index.js之前的关系及加载过程
wangshiqi666的博客
03-26 2915
Vue项目结构
Vue 中如何引入第三方 JS 库
SUN 的博客
09-28 1150
我们以 jQuery 为例，来讲解 一、绝对路径直接引入，全局可用 主入口页面 index.html 中用 script 标签引入： <script src="./static/jquery-1.12.4.js"></script> 这样，其实就已经可以在项目中使用 jQuery 了。 mounted () { console.log($) } 我们来看一下 调试器 截图： 可以看到，我们是可以正常打印出 jQuery 的。 由于我的项目开启了 ESL.
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.... 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容： ... module.exports = { baseUrl: isProd ? '/baseXXX/' : '/', .... } 这里需要注意的是 dev 环境下不需
关于vue.js发布后路径引用的问题解决
12-01
本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍： 在发布到iis目录下时候，如果放在网站的根目录下的时候，是不会有什么问题的 但是...
基于vue-cli npm run build之后vendor.js文件过大的解决方法
01-21
vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓慢的问题。 解决方案 像vue、axios、element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入，没有...
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 395
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1057
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 352
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
用Typescript写自动化工作流
最新发布
联蔚盘云的博客
04-29 680
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
JavaScript函数的作用域
猿码互联
04-23 217
JavaScript函数的作用域指的是变量的可访问范围。在JavaScript中，函数作用域是基于词法作用域（也称为静态作用域）的，意味着函数的作用域在函数被创建时就确定了，而不是在函数被调用时。这样创建的匿名函数会立即执行，并且其中的变量只能在函数内部访问，外部无法访问。这种方式在旧版本的JavaScript中很常见，但在ES6之后，可以直接使用块级作用域来实现同样的效果。需要注意的是，在ES6之前，JavaScript中并没有块级作用域的概念，只有函数作用域和全局作用域。
TypeScript学习笔记7-枚举
STATICHIT静砸的博客
04-23 324
如果中断了，那么下面的就从中断的地方继续增长。如果是字符串，那么定义的时候就要全部写上。主要作用就是节省因为枚举带来的性能消耗。如果是纯数字，下面的会进行自动增长。
怎么在ts环境的vite创建的vue3项目里使用cesium导入glb文件
06-01
在 TypeScript 环境的 Vite 创建的 Vue 3 项目中使用 Cesium 并导入 `.glb` 文件，你可以按照以下步骤进行操作： 1. 安装 Cesium： ``` npm install cesium --save ``` 2. 在 `index.html` 中引入 Cesium 的 CSS 和 JavaScript 文件： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue 3 App</title> <link href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /> <script type="module" src="./node_modules/cesium/Build/Cesium/Cesium.js"></script> </head> <body> <div id="app"></div> <script src="/src/main.ts" type="module"></script> </body> </html> ``` 3. 修改 `main.ts` 文件，导入并使用 Cesium： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import * as Cesium from 'cesium'; const app = createApp(App); app.config.globalProperties.$Cesium = Cesium; app.mount('#app'); ``` 4. 在你的组件中，通过 `$Cesium` 对象来创建 `Viewer`，并使用 `Entity` 加载 `.glb` 文件： ```vue <template> <div id="cesiumContainer"></div> </template> <script lang="ts"> import { defineComponent, onMounted } from 'vue'; export default defineComponent({ name: 'Cesium', setup() { onMounted(() => { const viewer = new $Cesium.Viewer('cesiumContainer'); viewer.entities.add({ name: 'Model', position: $Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), model: { uri: '/model.glb', }, }); }); return {}; }, }); </script> ``` 这样，你就可以在 TypeScript 环境的 Vite 创建的 Vue 3 项目中使用 Cesium 并导入 `.glb` 文件了。需要注意的是，在使用 `Entity` 加载 `.glb` 文件时，你需要提供相应文件的路径。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值