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

最新推荐文章于 2024-04-19 18:28:41 发布
原创 最新推荐文章于 2024-04-19 18:28:41 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #html #前端 #开发语言

这段代码展示了如何根据环境变量`NODE_ENV`来决定是否在开发环境中加载`epgis-js-1.5.0.min.js`和对应的CSS文件。在非开发环境下，这两个资源会被加载，提供地图功能。
//根据环境变量，设置在开发环境下不加载指定的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
关注
Vite - 配置 - 不同的环境执行不同的配置文件
northcastle的博客
11-10 2106
Vite 不同的环境使用不同的配置文件
VUE项目根据不同环境引入js
znb769525443的专栏
04-03 3000
最近采用VUE做客服相关的系统，由于依赖第三方js，因此需要根据不同环境引入js。 比如在外网引入a.js，在内网引入b.js，该场景可根据不同需求而调整。 中间尝试了一些方法，都不行，当然，加载该js需要在VUE初始化之前，不然会导致系统加载不了相关方法。 思考在三，决定从VUE的index.html文件着手。通过vue-cli生成的项目的index.html文件如下： <!DOCTYPE html> <html lang="en"> <head>
vue index.html根据环境变量加载不同js及如何使用全局变量
Maxiaobai_ing的博客
08-20 2931
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不同环境载入不同的js和css（CDN挂掉、失败后使用本地资源）
词不达意难知的博客
12-23 2006
优化项目资源请求量 规避掉在发布环境不需要的资源包 在index.html文件中 <script> // 举例 项目发布地址是 baidu 测试地址是 testbaidu // 通过检查路由地址来判断环境 从而控制引入文件 if (location.href.indexOf('testbaidu') > -1 ) { document.write('<script src="https://cdn.bootcdn.net/ajax/libs/vCon
使用vue-cli如何根据开发/生产环境加载不同的第三方js
weixin_34123613的博客
08-15 1837
目前情况是这样的： 正在开发一个页面，本地访问地址是 http://localhost/rss/pages/p1.html，此页面要引用 http://localhost/hrm/lib1.js。 但是http://localhost/rss和http://localhost/hrm不是同一个项目。 如果使用vue-cli进行开发，那本地的调试网址变成了 http://localhost:8080...
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在Vue.js开发过程中，我们有时需要在`index.html`文件中引入静态资源，如CSS、JavaScript文件或图片等。然而，遇到静态文件无法正常加载的问题可能会导致应用样式或功能缺失。本文将深入探讨这个问题，并提供两种...
vue项目中,main.js,App.vue,index.html的调用方法
10-17
在Vue项目中，main.js、App.vue和index.html是三个核心文件，它们在项目启动和运行过程中扮演着不同的角色。理解这三个文件的调用关系及其功能，对于掌握Vue项目结构和开发流程至关重要。 首先，main.js是整个Vue...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
对于Vue CLI 3，则需要在项目的根目录下创建一个vue.config.js文件，并设置publicPath和assetsDir等选项，以及通过修改路由模式来解决可能的问题。Vue中常用的路由模式包括hash和history模式，对于本地环境的配置，...
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
vue-cli脚手架config目录下index.js配置文件的方法
10-18
这些变量可以在项目中通过 `process.env` 访问，帮助区分不同环境下的配置。 2. **静态资源配置**： - `index`: 指定生成的 HTML 文件位置，通常是 `dist/index.html`。 - `assetsRoot`: 定义静态资源的根目录，...
vue动态加载js和css以及部分页面加载特定的js和css
wm9028的专栏
07-06 8974
# vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的，发现在第一次加载要很大的js导致卡顿、可以使用cdn加速和其他gzip方式效果不是很明显。因此考虑每个页面动态加载js和css的方式来解决。 ## 第一种方式 直接在index.html直接引入js和css > 注意这种方式，第一次加载大量js会很慢、很慢、很慢！ ```html ......
JavaScript的外部引入方式
人类工程师的博客
09-07 483
document.writeln("hello world"); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-.
Vue根据浏览器版本加载不同的组件
youyudexiaowangzi的专栏
06-22 1006
今天测试vue项目的时候，发现ie9上运行一片白屏，地址栏也没有直接跳转到redirect的子组件中，控制台中发现错误'Blob' undefined 重新创建项目，一点点添加原项目中添加组件，发现是vue-cropper导致的，npm install --save vue-cropper没问题，但是在main.js中import的时候就出现问题了，于是只能尝试在main.js中动态加载vue-cropper import 'babel-polyfill' import Vue from 'vue'
vue根据配置文件引入不同的js
pp
05-08 1259
//引入global import { SpringBootWebApp } from "@/global" let profile = SpringBootWebApp.profile let globalval = require(`@/global/global-${profile}`) //global.js全局 Vue.prototype.$global = globalval.default; console.log(Vue.prototype.$global) index.js export
手写vite插件之在index.html中根据不同的环境来使用不同的值
lth002的博客
04-09 1262
在index.html文件中使用。
vue项目 冲突：多个资源向同一文件名index.html发出不同的内容
qq_52015871的博客
02-10 1576
在 node_nodules/webpack/bin/webpack.js 中加入 html: { template: './src/index.ejs' }重新输入'npm run serve' 命令来运行项目，发现能成功运行，此时也就解决了该问题；代码： html: { template: './src/index.ejs' }把 index.html 文件重命名为 index.ejs 文件；方案一、尝试用纯英文命名，避免中文命名的影响(创建项目的时候报出该错误的；该方法是解决该问题的根本办法。
关于vue-cli3.x/4.x静态入口页面index.html根据开发 、测试、生产环境内容变化的处理（2020.3）
fangfangtulk的专栏
06-10 842
本篇介绍或者说记录一下2020年3月用到的一个知识，index.html根据不用环境变化内容。场景：外部插件只能在index.html中引入，且开发、测试环境引入的地址与生产环境不一样处理：1、检查环境的配置：src\config\的环境配置，例如env.js，代码如下： 2、打开public/index.html，在需要切换内容的地方处理，例如： 这种方法可以引用vue工程本身的环境配置，而且编码简单，易用。...
Vue组件中如何引入外部的js文件
qq_44091061的博客
06-09 4814
Vue组件中如何引入外部的js文件
VUE项目使用.env配置多种环境以及如何加载环境
热门推荐
CVPR收割机的博客
04-19 1万+
build:stage”: “vue-cli-service build --mode staging”，使用npm run build:stage指令时会在 staging 模式下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件，此时NODE_ENV 的值将被覆盖为 production，而不是 staging然后构建出生产环境应用。NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。
vue项目的入口文件index.html如何每次都加载最新的
最新发布
09-19
在 Vue 项目中让入口文件 `index.html` 每次都加载最新内容，可以采用以下方法： ### 服务器端设置响应头 在服务器端设置合适的响应头，告知浏览器不要缓存 `index.html` 文件。例如设置 `Cache-Control: no-store`，使浏览器不缓存该资源，每次都从服务器重新获取。以 Node.js 的 Express 框架为例： ```javascript const express = require('express'); const app = express(); app.get('/', (req, res) => { res.setHeader('Cache-Control', 'no-store'); res.sendFile(__dirname + '/public/index.html'); }); const port = 3000; app.listen(port, () => { console.log(`Server running on port ${port}`); }); ``` ### 添加版本号或时间戳 在引用静态资源的 URL 后面添加版本号或时间戳，让浏览器认为每次请求的是不同文件，从而不使用缓存。在 `index.html` 中可以这样写： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue App</title> <link rel="stylesheet" href="styles.css?v=1.0.1"> <script src="main.js?timestamp=1630412345"></script> </head> <body> <div id="app"></div> </body> </html> ``` ### 手动清理缓存 手动清理浏览器缓存，不同浏览器清理缓存的方式不同，通常可在浏览器设置中找到“清除浏览数据”选项，选择清除缓存文件。 ### 开发环境特定操作 在开发环境中，按键盘上的 F12 键打开调试工具后，按 Ctrl + R 键，可重新加载资源；按 F12 打开调试工具，选择 Network，选择禁用缓存 Disable cache，再刷新页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值