vue-cli3配置环境变量

最新推荐文章于 2024-08-02 17:09:30 发布

coderW

最新推荐文章于 2024-08-02 17:09:30 发布

阅读量924

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/coderW/article/details/107389925

版权

本文介绍了如何在基于Vue CLI3的项目中处理环境变量，尤其是针对业务需求如埋点等场景。原先在index.html中使用jsp语法的方式被指出不够理想，文章推荐参考链接中的方法，利用webpack.DefinePlugin进行优雅的环境变量配置。

摘要由CSDN通过智能技术生成

因为一些业务需求，如埋点等需要区分环境，在index.html用到jsp语法，在vue-cli搭建的项目中配置环境变量

chainWebpack:config={
   
	 config
      .plugin('define')
      .tap(args => {
   
        //一些根据环境变化的腾讯广告或者百度统计埋点参数
        const {
   baiduStatisticsSrc, txAdvertiseData

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

coderW

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

脚手架vue-cli自定义创建Vue项目，完整详细步骤！

共同学习，共同成长

06-04

493

脚手架vue-cli自定义创建Vue项目，完整详细步骤！

如何搭建一个完整的Vue3.0 + ts 的项目

sinat_28371057的博客

12-13

4929

如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段（最终产品的候选版本，如果没有问题则可发布成为正式版本）。所以Vue3.0的学习是我们必然的趋势，今天，主要分享一下Vue3.0的详细搭建过程，希望可以为初入Vue3的小伙伴有所帮助。我们现在开始进入今天的主题啦~~ 一、安装 1. 安装nodejs 此处提供nodejs下载地址：https://nodejs.org/zh-cn/dow..

参与评论您还未登录，请先登录后发表或查看评论

vue3学习教程第三十六节（自定义插件）

weixin_39593730的博客

05-30

734

插件 (Plugins) 是一种能为Vue添加全局功能的工具代码。主要应用于以下四个方面1、通过和注册一到多个全局组件或自定义指令。2、通过使一个资源可被注入进整个应用。3、向中添加一些全局实例属性或方法4、一个可能上述三种都包含了的功能库 (例如vue-router。

vue3（vite）配置环境变量

最新发布

weixin_55049839的博客

08-02

1148

一般在开发时候最常用到(development)开发环境、(production)生产环境、(test)测试环境。在vue3根目录创建三个文件，分别为：.env.development 、.env.production 、.env.test

Vue3：vue-cli项目创建及vue.config.js配置

米拉

01-08

2758

是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。项目创建Vue 2.x、Vue 3.x 或自定义，默认版本vue3.x和vue2.x无需配置，自定义需配置。通过 ↑↓ 箭头选择依赖，按 “空格” 是否选中，按 “a” 全选，按 “i” 反选。自定义选择需要支持的特性（ ↓ 不使用任何css或js扩展）vuex（vue的状态管理模式、store）CSS 预处理器（如：less、sass）代码风格检查和格式化（如：ESlint）vue-router（vue路由）

vue3.0+vite+router搭建项目（三）:配置vite.config.js

前端互助会

03-09

3719

前言：上一篇文章中，我们已经讲解了项目搭建的方法以及过程总出现bug的解决方法。这篇文章主要讲解一下配置。一、vite 配置别名使用编辑器打开搭建号的项目进入配置文件 vite.config.js。 import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/export default defineConfig({

vue3框架搭建

weixin_48022521的博客

01-29

1190

目前预估是这些有部分还没用到就先不写了，等用到了再补充。

vue-cli配置环境变量的方法

12-12

在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常...

vue-cli3添加模式配置多环境变量的方法

12-09

以下是对 Vue CLI 3 添加模式配置多环境变量方法的详细解释：首先，环境变量和模式在开发过程中起着至关重要的作用。它们允许我们根据当前的运行环境来调整应用的行为，例如在预发环境中设置不同的接口地址，或者...

vue-cli2与vue-cli3在一台电脑共存的实现方法

10-16

配置环境变量的目的是为了让系统能够识别并运行我们所安装的两个版本的Vue CLI。具体来说，就是将两个`.bin`文件夹的路径添加到系统的环境变量中。这样，在命令行中输入`vue-cli2`或`vue-cli3`时，系统能找到对应的...

配置vue.config.js

weixin_44976418的博客

04-20

307

配置vue.config.js 1:安装compression-webpack-plugin插件,用于打包的时候开启gzip可以很大程度减少包的大小，非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验。 1.1引入compression-webpack-plugin const CompressionPlugin = require(“compression-webpack-plugin”) 1.2 //打包压缩在chainWebpack中 if (process.en

vite vue3 config配置篇

Wx_H_的博客

08-05

3620

vite vue3 vite.config.js 内容配置

VUE多页面配置

qq16337的博客

10-28

593

vue.config.js 配置 module.exports = { pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 ...

webpack.DefinePlugin-定义全局变量的插件

song854601134的博客

11-17

1988

webpack.DefinePlugin 官方文档:webpack.DefinePlugin 参考文档:实用webpack插件之DefinePlugin DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。用法每个传进 DefinePlugin 的键值

第十三章实现组件库按需引入功能

天界程序员的博客

12-01

1407

组件库会包含几十甚至上百个组件，但是应用的时候往往只使用其中的一部分。这个时候如果全部引入到项目中，就会使输出产物体积变大。按需加载的支持是组件库中必须考虑的问题。

史上最详细的webpack 讲解2 （DefinePlugin中的淫技巧）

weixin_33828101的博客

04-11

323

vue环境常量拓展

青云码上的博客

02-16

211

一个环境文件(如 .env .env.dev .env.prod )只包含环境变量的“键=值”对; 只有NODE_ENV，BASE_URL和以VUE_APP_开头的常量将通过webpack.DefinePlugin静态地嵌入到客户端侧的代码中，但我们可以通过修改webpack的配置来让项目支持其他命名方式的常量: // vue.config.js module.exports...

webpack环境变量与vue-cli3设置环境变量

雨巷的博客

03-05

3232

1、在业务代码中使用环境变量（DefinePlugin） DefinePlugin的正确用法 DefinePlugin中的每个键，是一个标识符或者通过.作为多个标识符。如果value是一个字符串，它将会被当做code片段如果value不是字符串，它将会被stringify(包括函数) 如果value是一个对象，则所有key的定义方式相同。如果key有typeof前缀，它只是对typeof...

Vue-CLI 3环境配置与打包策略详解

配置环境变量 Vue CLI 3 强调环境隔离，通过`.env`文件管理不同的环境变量。主要有以下几种情况： - .env: 这是开发环境的默认配置，通常包含： - NODE_ENV='development'：表示当前环境为开发模式。 - VUE_APP_...