精华内容
下载资源
问答
  • 那么我们如何配置不同的环境变量呢?为了更加方便消化本文章,建议先看下官方文档:看完官方的文档如果还没有明白,可以参考本文。在vue-cli构建的项目中,默认有3种模式,如下图:我个人的理解就是:你执行npm run ...

    温馨提示:本文只适用于vue-cli 3.0 及以上的版本哦~

    ------------------正文开始------------------

    开发项目时,经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢?

    为了更加方便消化本文章,建议先看下官方文档:

    看完官方的文档如果还没有明白,可以参考本文。

    在vue-cli 构建的项目中,默认有3种模式,如下图:

    我个人的理解就是:

    你执行npm run serve时,对应的环境就是开发环境;

    你执行npm run build时,对应的环境就是生产环境。

    如果你开发的项目中,不止该3种,该咋整呢?像在我开发的项目中,就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。请记住我括号里面的英文。

    来,左边跟我一起画个龙,在你右边儿画一道彩虹~画完了,开始进入主题了~

    ------------------进入主题------------------

    1.创建不同环境变量文件

    如官方文档所说,通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境,所以配置了5个.env文件。如下图:

    2.给.env文件添加内容

    基本格式如下:

    NODE_ENV=环境名称

    VUE_APP_URL=对应的环境地址

    如我本地环境的配置就如下图所示:

    我本地是用的easy-mock模拟的数据,所以配置的地址是mock接口地址。

    3.在package.json中添加不同环境对应的执行语句

    如官方文档所说,可以通过传递  --mode 来配置不同的模式。我自己的项目配置如下图:

    请注意我配置文件中的 serve 与build 。

    4.使用

    文件已创建好,配置语句也已写好。怎么用它呢?

    首页你需要哪个环境,就执行哪个环境的命令语句。

    比如我现在需要local环境,就执行 npm run local-serve 。如下图所示:

    然后通过 process.env.NODE_ENV 获取环境名;通过 process.env.VUE_APP_URL 获取环境对应的url。

    比如我们在axios请求中,就可以把它的baseURL设置为 process.env.VUE_APP_URL ,如下图所示:

    后面的"/web"是根据我自己接口来的,你别也写个"/web"。

    如果你不确定你自己现在是在哪个环境变量下,可以   console.log("当前环境变量:"+process.env.NODE_ENV) 和   console.log("当前环境路径:"+process.env.VUE_APP_URL)  看下。

    像我的项目中就是下面这2个东东:

    输出的内容就是.env.local文件里面配置的环境变量。

    为了更好的理解,我们再执行一条语句, npm run serve ,看看此时的环境变量是哪个?

    为什么呢?

    因为 npm run serve 默认指向.env.developement,我在里面配置的环境就是上面输出的内容。.env.developement的配置如下图:

    总而言之就是,你需要哪个环境变量,就 【npm run 对应的环境变量】 就完事了!

    关于vue cli4.0 配置环境变量就讲到这里了~~如果有更好的建议或者疑问,欢迎留言~

    展开全文
  • 问题实际开发中,开发环境和生产环境中一些变量是不同的,比如接口地址等等,打包之前需要手动切换。编译时新建env.jslet baseUrl = '';if(process.env.NODE_ENV == 'production'){baseUrl = 'https://xxxxxxxxx';} ...

    问题

    实际开发中,开发环境和生产环境中一些变量是不同的,比如接口地址等等,打包之前需要手动切换。

    编译时

    新建env.js

    let baseUrl = '';

    if(process.env.NODE_ENV == 'production'){

    baseUrl = 'https://xxxxxxxxx';

    } else if (process.env.NODE_ENV == 'development') {

    baseUrl = '/api'

    }

    export {

    baseUrl

    }

    process.env.NODE_ENV 是通过webpack 内置的 DefinePlugin为所有的依赖定义的变量

    webpack.dev.conf.js

    new webpack.DefinePlugin({

    'process.env.NODE_ENV': 'development'

    }),

    webpack.prod.conf.js

    new webpack.DefinePlugin({

    'process.env.NODE_ENV': 'production'

    }),

    这样在项目任意文件中都能调用process.env.NODE_ENV变量,本人测试过,process并不是挂载在window变量上,猜测可能是挂载到了node的process变量。

    在运行脚本编译项目的时候,会根据变量值的不同,设置不同的baseUrl。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 如果有Vue的Demo 不知道怎么运行的同学可以看这里 这里只讲Win下面环境配置 一、NodeJs安装 1、下载Windows 安装包(.msi),并安装https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi 2、测试nodejs是否安装...

     如果有Vue的Demo   不知道怎么运行的同学可以看这里

    这里只讲Win下面环境配置

    一、NodeJs安装
    1、下载Windows 安装包(.msi),并安装https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi
    2、测试nodejs是否安装成功。(npm -v)
     
    二、配置nodejs环境变量
    vue-cli脚手架安装
    设置淘宝镜像
    安装npm,由于npm官网镜像访问太慢,我们使用淘宝的npm镜像,在node命令窗口
    npm install -g cnpm --registry=https://registry.npm.taobao.org
     
    接下来就是重点了 安装vue-cli
    cnpm install vue-cli -g
     
    三、cd 进入到我们得到的项目跟目录下,如E:\VueDemo,并执行安装。cnpm install
     
    四、接下来执行 npm run dev
     
    这时候会出现  Lisening at http://localhost:8088       会自动打开浏览器预览项目                成功!~~~~~~~~~~~~

    转载于:https://www.cnblogs.com/fuyu-blog/p/7850371.html

    展开全文
  • 关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件.env 全局默认配置文件,不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件关于...

    关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件

    .env 全局默认配置文件,不论什么环境都会加载合并

    .env.development 开发环境下的配置文件

    .env.production 生产环境下的配置文件

    关于文件内容:

    注意:属性名必须以"VUE_APP_"开头,比如VUE_APP_XXX

    .env:

    .env.development:

    关于文件的加载:

    根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”

    比如执行npm run serve命令,会自动加载.env.development文件

    启动项目:npm run serve

    再App.vue文件中添加下面测试代码打印一下process.env:

    console.log(process.env)

    可见NODE_ENV被改为了development,覆盖掉了.env中的全局属性

    .env中的全局属性NODE_ENV、VUE_APP_URL被覆盖,

    .env中的全局属性VUE_APP_PREVIEW、VUE_APP_DEFAULT_PARAM被保留

    展开全文
  • Vuevue 配置兼容ie浏览器发布时间:2018-11-26 10:39:46作者:wangjian浏览量:843点赞量:0vue框架使用了ES6,然而ie浏览器不支持ES6语法,导致使用vue搭建的项目在ie浏览器上面无法运行,这里解决vue框架兼容ie(9+)...
  • vue-cli3配置环境变量先挂官网描述:环境变量和模式需求根据运行环境判断执行代码:预发环境操作完成跳转地址与线上环境跳转地址不同线上环境添加埋点脚本实现Step1:在项目根目录中新建.env.uat.env.uat配置如下...
  • 概述很多时候我们在用jenkins打包的时候,肯定有很多环境,例如生产环境、测试环境、开发环境等等,那么jenkins+maven应如何动态打包不同配置文件呢?下面简单介绍下怎么设置和其中的配置怎么关联起来的。1、pom....
  • 我们在开发项目过程中,正常情况下会有本地开发环境,测试线环境,线上正式线环境等,当然不同公司会有点差别,具体情况具体玩吧,不同环境配置会有所不同,比如我们服务器地址,接口地址等等。所以我们要区分,那...
  • 最近下载了vue-cli3,研究了下vue-cli3下多环境的配置。 首先,安装vue-cli3。...现在说重点,怎么配置环境。打开package.json文件,见下图: 在scripts里面修改环境配置,可以根据自己的项目来修改对应的环境,见
  • Mac电脑安装并配置Vue环境

    千次阅读 2018-09-18 09:56:21
    这一步一定要做,不然后面安装Vue脚手架的时候就会出现错误(不要问我怎么知道的) 打开环境变量文件 open -e .bash_profile 打开之后添加一行以下代码,(Mac的node,npm可执行文件都在/usr/local/bin/...
  • 配置VUE环境遇见的bug

    2019-02-12 11:43:00
    1.首先是用websotrm 我不知道是什么情况无论的怎么弄都不能让webtorm支持ES6 但是如果我在script 标签type加上ES6 又打印不出来结果 没办法只好用VScode 首先在VScode中要想支持VUE 文件 》首选项》设置 里面"vetur...
  • vue项目相关配置

    2019-10-24 09:20:00
    具体怎么配置请继续往下看: favicon.ico文件路径: 1、、打包后的(生产环境) 可依照上图查找路径进行配置:build → webpack.prod.conf.js → plugins: [ ....... new HtmlWebpackPlugin({ filen...
  • 最近写了一个 Vue 插件,用来解决页面组件主题上色的问题。随着插件不断迭代,代码在慢慢增多,解决的问题从小而精到...其实对于 “怎么Vue 插件加上单元测试?” 这个问题的答案,Vue 官网的教程(Vue Test Utils...
  • 测试环境,线上环境因为每个环境的接口域名、webpack 配置都是不同的,所以在打包构建时,我们需要区分这些环境,这时就用到了环境变量在工作中使用到了两种方法来区分,下面将这两种方式一一列举出来技术框架是vue-...
  • Vue Cli下环境变量和模式Vue Cli下环境变量和模式一. 模式Vue Cli 项目中有三种模式:development(开发模式)、production(生产模式)、test(测试模式)。注意模式不同于NODE_ENV,一个模式可以包含多个环境变量。1. ...
  • Vue创建项目配置

    2019-09-28 21:44:05
    一股脑的袭来,感觉创建个项目怎么这个麻烦。这里就讲一下vue的安装及创建。 安装环境  当然第一步还是先下载VS Code咯。然后傻瓜式的安装一步接一步的进行下去就完事。然后打开进入VS Code,这里会提醒你,有些...
  • vue-cli3分环境打包配置

    千次阅读 2019-11-21 16:26:29
    概述 在项目开发过程中一般会分为三种运行环境:开发环境、测试生产环境、正式生产环境,不同的环境配置上的要求会有所不同,最简单的例子就是请求后端的...接下来主要讲解在vue-cli3项目中打包怎么解放人肉配置,...
  • vue-cli如何添加多种环境变量目前webpack(vue-cli) 打包有两种变量,development, productor, 如何添加一个 test的测试环境vue-cli 3.0vue-cli3.0简化了业务需求,没有那么多额外的配置,目前想改变环境变量,官方...
  • 通过vue-cli中的npm run build 打包,这个只能打包到一个环境,在实际工作中可能有生产环境,预发布环境甚至更多,每个环境的接口地址都不同,每次都需要手动修改接口地址,非常繁琐。那我们怎么才能做到执行不同的...
  • 这个文件配置项是我结合了多个大神的设置和官方文档想出来的即配置了jquery也配置了区分生产环境和开发环境的变量,但是变量还没有试过,项目就被别人接手了,在最后一周里我新开发了另一个模块,周六项目一上线就被...
  • // const path = require('path');... /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_E...
  • 分享Vue创建项目配置

    2019-08-16 14:56:03
    一股脑的袭来,感觉创建个项目怎么这个麻烦。这里就讲一下vue的安装及创建。 安装环境  当然第一步还是先下载VS Code咯。然后傻瓜式的安装一步接一步的进行下去就完事。然后打开进入VS Code,这里会提醒你,有些...
  • vue脚手架3和vue脚手架2的最大区别就是3所以的配置都是在vue.config.js目录下做配置的啦~当然配置之前要清楚开发环境,测试环境,生产环境。这样也方便自己打包,不需要改域名地址,同时也清楚哪些配置是在开发环境...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 227
精华内容 90
关键字:

vue环境怎么配置

vue 订阅