vue-cli 3.0运行、打包不同环境的配置

最新推荐文章于 2022-03-28 11:01:37 发布
最新推荐文章于 2022-03-28 11:01:37 发布
阅读量497 收藏 3
点赞数
分类专栏： vue 项目经验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/versious/article/details/113883139
版权

默认情况下，一个 Vue CLI 项目有三个模式：test、development、production。也可以自己创建其他模式

1.在根目录下创建.env.环境文件

2.文件夹里配置NODE_ENV和VUE_APP_BASE_API，NODE_ENV决定运行时候的模式，变量以VUE_APP_开头

NODE_ENV = 'beta'  // 决定应用运行的模式

VUE_APP_BASE_API = '请求的域名'

3.拦截器里的baseUrl设置为process.env.VUE_APP_BASE_API，运行不同模式时接口请求的域名不一样。

4.在pack

最低0.47元/天 解锁文章
versious
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue 不同环境配置不同的打包命令
12-11
最近做的一个项目是配置了三个环境的：正式环境、测试环境和开发环境，下面以这个为例 第一步：安装cross-env npm i --save-dev cross-env 或者在 package.json中加上”cross-env”: “^5.0.1″进行安装依赖 package.json: //这是我项目的目录 第二步：修改各环境下的参数 在config/目录下添加test.env.js、develop.env.js。并且修改文件里的内容 config/prod.env.js config/develop.env.js 第三步：更改build文件夹的东西 1.给buil
vue3.0下配置多环境打包
WeiflR10的博客
05-24 430
首先在项目根目录下新建3个文件 ①.env.testt配置（就是测试环境） NODE_ENV = 'test' VUE_APP_CURENV = 'test' ② .env.development配置（就是开发环境） NODE_ENV = 'development' VUE_APP_CURENV = 'development' ③ .env.production配置（就是生态环境及线上环境） NODE_ENV = 'production' VUE_APP_CURENV = 'product
vue cli3.0 切换不同环境
strong90的博客
12-17 284
1. 在根目录下创建constans.js 内容如下：个人项目使用nginx配置，所以服务器上的api接口不用指定url var baseUrl = ''; switch (process.env.NODE_ENV) { case 'production': baseUrl = '/api'; break; case 'development': // 5...
vue项目针对不同的环境配置不同的命令行(打包和运行)
Abez_c的博客
05-12 1989
1.需要安装下载cross-env; npm i --save-dev cross-env 2.在vue项目目录下的config文件夹下创建文件 当前项目分为四种环境:开发环境(dev)、测试环境(test)、预生产环境(pre)、生产环境(prod); 由于config文件下已经存在了开发环境和生产环境的文件，后期只需要修改内容即可，所以需要再创建test和pre的文...
详解vue-cli3多环境打包配置
10-17
主要介绍了vue-cli3多环境打包配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli3.0配置及使用注意事项详解
01-21
这次给大家带来vue-cli3.0配置详解，使用vue-cli3.0配置的注意事项有哪些，下面就是实战案例，一起来看一下。 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run ...
vue-cli3.0 脚手架搭建项目的过程详解
10-17
Vue CLI 3.0 是 Vue.js 官方提供的一个强大脚手架工具，它简化了 Vue.js 项目的初始化和构建过程。本篇文章将详细介绍如何使用 Vue CLI 3.0 来搭建一个新的 Vue 项目。 首先，你需要确保已经安装了 Node.js 和 npm...
使用Vue-cli 3.0搭建Vue项目的方法
08-27
本文主要介绍了使用Vue-cli 3.0搭建Vue项目的方法，涵盖了环境准备、搭建脚本文件、配置文件等多个方面的知识点。 一、环境准备 在开始搭建Vue项目之前，需要进行环境准备，包括安装Node.js、nrm、yarn、vue-cli ...
vue-cli-plugin-browser-extension:适用于vue-cli 3.0的浏览器扩展开发插件
05-13
vue-cli-plugin-browser-extension vue-cli 3.x的浏览器扩展开发插件 它有什么作用？ 这旨在作为的替代品（现在，使用此插件已预设为 ）。 该插件为您的vue应用程序更改了serve命令。 此新命令仅用于在测试您的...
vue cli 3.0通用打包配置代码,不分一二级目录
11-19
相较于早期的 Vue CLI 2.0，3.0 版本引入了更简洁的配置方式，使得开发者无需深入理解 Webpack 配置也能进行有效的项目打包。 在 Vue CLI 3.0 中，如果需要进行自定义打包配置，不再需要像在 2.0 版本那样直接修改 ...
vue-cli3.0图片转base64规则配置
09-01
vue-cli3.0图片打包，小于10k的图片没有自动转base64问题处理
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
12-02
前言：最近用vue-cli 3.0 构建一个小型的工单管理系统，完工后build发现一个chunk-vendors包就达到985kb，加上其他一些资源文件，首页的下载总共大小快要2M。测试给的第一个反馈就是首屏慢慢慢慢慢！ 根据首屏加载...
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
10-17
在 `package.json` 文件中，可以为不同环境配置打包指令，例如： ``` "buildTest": "vue-cli-service build --mode test", "buildPre": "vue-cli-service build --mode pre", "build": "vue-cli-service build ...
详解在vue-cli3.0中自定css、js和图片的打包路径
01-21
我们有时候因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹，并不能针对css/js/img等资源文件分别来做设置，...
vue-cli3.0 特性解读
08-27
Vue CLI 3.0 引入了预设配置的概念，允许开发者选择预设的配置集，如基本的 Vue.js 项目、PWA 支持等。同时，用户还可以自定义配置，通过一系列交互式选项来选择需要的功能，如 TypeScript、路由、Vuex、CSS 预...
vue-cli / vue-cli3 配置不同环境对应不同打包命令详解
dengzeyuan的博客
03-20 2825
废话不多说，直接跟着我的步骤走； vue-cli 一、package.json 因为我这边的Jenkins（测试环境）的脚本执行命令为 build（运维不给改）所以只好前端将build命令对应的环境修改为测试环境。 ...
webpack打包 productionSourceMap 和 devtool 的区别
qq_38935512的博客
03-28 2604
前沿 最近看webpack有个疑惑：productionSourceMap和devtool这两个属性功能貌似一样，都是解决生产环境报错定位困难的问题 查了一些资料 1.devtool devtool:他是webpack的属性，在webpack文档中能找到https://v4.webpack.docschina.org/configuration/devtool/#root 下面是他的一些选项，根据实际情况例如生产环境不想暴露源码可以选择对应的值，文档中说的也是比较清楚的。下图他的一些打包性能也是比较清
npm包发布流程 正式包和测试包beta
希文Gershwin
11-10 3755
注册一个npm账号 注册地址：https://www.npmjs.com/ 初始化要封装的包 1、选择一个文件夹，然后命令行cd进去 npm init 接下来就是一长串表单： name：填写你这个包的名字，默认是你这个文件夹的名字。不过这里要着重说一下，最好先去npm上找一下有没有同名的包。最好的测试方式就是，在命令行里面输入npm install 你要取的名字，如果报错，那么很好，npm上没有跟你同名的包，你可以放心大胆地把包发布出去。如果成功下载下来了。。。那么很不幸，改名字吧。。。 version
npm run “项目名”,一个极其大的坑（不认真导致的）
厚积薄发
05-19 2422
    在终端上面，tab通常都是一键补全的作用，今天因为tab犯了一个极其傻的错误。    这是我输入的命令及报错的原因，仔细一看实际很明显，让我们去日志里看。                                           日志里面的错误信息都在下面这里了。    经过一系列的查找，为什么会有verbose stack 的错误呢 ？然后以为node的问题，各种...
vue-cli3.0打包后禁止浏览器Sources调试
最新发布
06-02
可以通过在`vue.config.js`中的`configureWebpack`属性中添加以下配置来禁止浏览器Sources调试： ```javascript configureWebpack: { devtool: 'none' } ``` 这将禁用Webpack的source map生成功能，从而使浏览器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值