vue3不同环境的打包区分

最新推荐文章于 2024-07-10 17:19:57 发布
最新推荐文章于 2024-07-10 17:19:57 发布
阅读量892 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48255917/article/details/121083902
版权

vue3不同环境的打包区分

首先在vue.config.js中写入

const path = require('path') //导入路径插件
let isProduction = process.env.NODE_ENV == 'production',  //判断当前的环境“pro”生产环境  dev开发环境
    url; //定义url
if (isProduction)
最低0.47元/天 解锁文章
小菜鸟学代码··
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
在Vue-cli3中 区分环境打包
前端李小白的博客
04-11 7136
在vue-cli3的项目中， npm run serve时会把process.env.NODE_ENV设置为‘development’； npm run build 时会把process.env.NODE_ENV设置为‘production’； 此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。 头疼的是打包时线上环境可能分多种，比如测试环境...
vue 不同环境打包
攻防人生3722的博客
07-25 2062
vue开发完成之后就要分不同环境打包测试，本文即打包sit，prod环境，并在本地可以正常运行npm run dev 的解决方案 安装cross-env，cnpm install cross-env,在你项目根目录下执行 在package.json增加打包命令 在config下增加对应的配置文件，原来的prod配置文件也要加上 ENV_CONFIG:‘“prod”’,项。 修改i...
Vue 项目分环境打包的方法示例
10-18
主要介绍了Vue 项目分环境打包的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3项目打包的时候，怎么区别测试环境，和本地环境
最新发布
qq_70036866的博客
07-10 317
接下来，在你的代码中，你可以使用这些环境变量来标记你的接口。在Vue 3项目中，你可以在组件中使用。进行项目打包时，Vue CLI 会根据你的打包命令来读取对应的环境变量文件。在Vue 3项目中区别测试环境和本地环境，并标记接口的方法可以通过环境变量来实现。然后，你就可以根据不同的环境变量来确定接口地址。启动本地开发服务器时，Vue CLI 会默认读取。文件，并定义你的环境变量。首先，你可以在你的项目根目录下创建一个。来指定使用测试环境的配置文件。作为本地环境的配置文件，作为测试环境的配置文件。
vue3.0 区分生产环境，测试环境，正式环境
weixin_42340514的博客
08-23 4975
1.在根目录下新建.env.xxx文件 .env.development // 开发 .env.test // 测试 .env.production // 正式 2.
vue-cli3：区分开发、测试、生产环境
阵雨的博客
09-02 3568
vue-cli3相比于2取消了build和config文件夹，需要自己创建.env文件区分不同的环境 官方文档地址：https://cli.vuejs.org/zh/guide/mode-and-env.html 1、在根目录下创建一个.env.development 是开发环境 VUE_APP_URL = 'https://www.easy-mock.com/mock/5d6cbe39f...
详解vue.js根据不同环境(正式、测试)打包到不同目录
10-18
Vue.js允许开发者通过环境变量和配置文件来区分不同环境的打包需求。这样做的目的是为了让开发、测试和生产环境的文件互不干扰，同时也方便部署和后续的维护工作。理解并掌握Vue.js环境区分打包的策略，对于管理Vue...
详解vue 不同环境配置不同的打包命令
12-11
本篇文章将详述如何在Vue项目中配置不同环境的打包命令。 首先，为了在不同环境下设置变量，我们需要安装`cross-env`这个Node.js库。`cross-env`的作用是在跨平台上设置和使用环境变量，确保`NODE_ENV`可以在任何...
vue-cli3分环境打包
01-20
1.package.json添加命令 scripts”: { “dev”: “vue-cli-service serve”, //本地运行时process.env.NODE_ENV ===‘development’(默认) “build:pre”: “vue-cli-service build –mode pre”, //dev模式下打包(测试服打包)，process.env.NODE_ENV的值为’.env.dev文件中NODE_ENV声明的值’ “build”: “vue-cli-service build” //正式服打包，process.env.NODE_ENV ===‘produ
超简单Vue-cli3区分环境打包
m0_46387873的博客
08-30 873
Vue-cli3区分开发、测试、生产等不同环境的包 文章目录Vue-cli3区分开发、测试、生产等不同环境的包一 、需要新建的配置文件二 、根据配置去动态改变接口前缀三 、请求封装ajax的时候引入`env.js`四 、配置打包命令 在开发中，我们的项目肯定是要区分不同环境的，而不同环境使用的接口前缀肯定也是不同的，这就需要我们分不同环境打不同的包，这里以大多数的（开发，测试，生产）为例，直接上代码粘贴复制即可使用。 一 、需要新建的配置文件 1、开发环境配置文件 在根目录下 创建：.env.deve
vue cli3 实现分环境打包
qq_42075271的博客
03-10 2407
用cli3搭建的vue项目号称零配置文件，为了方便打包（不用手动来回改不同环境进行打包）那么我们在需要打包的时候分不同环境打包怎么办呢 1.在根目录下创建三个配置文件，如下图 这里我创建了三个，这三个分别是我的 本地；离线；线上环境 ，三个文件的内容依次为下VUE_APP_TITLE要对应当前文件后缀，build 对应的production NODE_ENV = 'production' VUE_APP_TITLE = 'alpha' ===================================
vue-cli3实现分环境打包
xustart7720的博客
04-25 531
遇到的问题 在vue-cli3的项目中，默认的package.json配置 npm run serve时会把process.env.NODE_ENV设置为‘development’ npm run build 时会把process.env.NODE_ENV设置为‘production’ 此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。 ...
vue3_webpack和vite区分环境打包
u014708123的博客
12-22 621
【代码】vue3_webpack和vite区分环境打包。
vue cli3 区分开发环境，测试环境，正式环境
qq_40291247的博客
12-31 1784
在根目录下新建 .env.xx (xx可以是自己取的用来区分这三个环境） // 如： env.development // 开发 env.beta // 测试 env.production // 正式 编辑新建的文件 注意：全局变量仅除NODE_ENV和BASE_URL这两个保留变量外，其余自定义变量都需使用VUE_APP开头。 .env文件里不允许存在注释 （这里只为了大家更好的阅读理解） // env.development NODE_ENV = 'development' VUE_.
vue-cli3实现分环境打包步骤（给不同的环境配置相对应的打包命令）
weixin_34221073的博客
07-19 617
在vue-cli3的项目中， npm runserve时会把process.env.NODE_ENV设置为‘development’； npm run build时会把process.env.NODE_ENV设置为‘production’； 此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。 头疼的是打包时线上环境可能分多种...
vue 区分多环境打包
细节怪的博客
05-20 556
区分不同的环境（测试、正式环境）
vuecli3 生产开发测试环境以及输出文件目录打包配置
06-06
好的，以下是对应的配置： 1. 生产环境配置： 在`package.json`文件中，添加如下命令： ``` "build": "vue-cli-service build --mode production" ``` 在根目录下创建`vue.config.js`文件，配置如下： ```javascript module.exports = { // 配置生产环境的打包输出目录 outputDir: 'dist', // 配置生产环境的publicPath publicPath: '/', // 打包时不生成.map文件，减少打包体积 productionSourceMap: false, // 生产环境下的webpack配置 configureWebpack: config => { // 在生产环境中使用CDN加速，减少打包体积 if (process.env.NODE_ENV === 'production') { config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'axios': 'axios', } } } } ``` 2. 开发环境配置： 在`package.json`文件中，添加如下命令： ``` "serve": "vue-cli-service serve --mode development" ``` 3. 测试环境配置： 在`package.json`文件中，添加如下命令： ``` "test": "vue-cli-service build --mode test" ``` 在根目录下创建`vue.config.js`文件，配置如下： ```javascript module.exports = { // 配置测试环境的打包输出目录 outputDir: 'dist-test', // 配置测试环境的publicPath publicPath: '/', // 打包时不生成.map文件，减少打包体积 productionSourceMap: false, // 测试环境下的webpack配置 configureWebpack: config => { // 在测试环境中使用CDN加速，减少打包体积 if (process.env.NODE_ENV === 'test') { config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'axios': 'axios', } } } } ``` 以上就是生产、开发和测试环境的配置，同时也可以通过`process.env.NODE_ENV`变量来区分不同的环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小菜鸟学代码··

给打赏的我会单独一对一讲解

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

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

打赏作者

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

抵扣说明：

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

余额充值