精华内容
下载资源
问答
  • I've been reading the ... :) As noted in comment below: If you are using Vue cli 3, only variables that start with VUE_APP_ will be loaded. Don't forget to restart serve if it is currently running.

    I've been reading the official docs and I'm unable to find anything on environment variables. Apparently there are some community projects that support environment variables but this might be overkill for me. So I was wondering if there's something simple out of the box that works natively when working on a project already created with Vue CLI.

    For example, I can see that if I do the following the right environment prints out meaning this is already setup?

    mounted() {

    console.log(process.env.ROOT_API)

    }

    I'm a kinda new to env variables and Node.

    FYI using Vue CLI version 3.0 beta.

    解决方案

    If you use vue cli with the Webpack template (default config), you can create and add your environment variables to a .env file.

    The variables will automatically be accessible under process.env.variableName in your project. Loaded variables are also available to all vue-cli-service commands, plugins and dependencies.

    .env # loaded in all cases

    .env.local # loaded in all cases, ignored by git

    .env.[mode] # only loaded in specified mode

    .env.[mode].local # only loaded in specified mode, ignored by git

    Your .env file should look like this:

    VUE_APP_MY_ENV_VARIABLE=value

    VUE_APP_ANOTHER_VARIABLE=value

    It is my understanding that all you need to do is create the .env file and add your variables then you're ready to go! :)

    As noted in comment below:

    If you are using Vue cli 3, only variables that start with VUE_APP_ will be loaded.

    Don't forget to restart serve if it is currently running.

    展开全文
  • vue环境变量

    2021-06-01 21:01:09
    "serve": "vue-cli-service serve", // 开发环境 "build": "vue-cli-service build", // 生产环境 "test": "vue-cli-service build --mode testing" // 测试环境 }, 我们根据不同的启动方式来启用不同的域。 2...

    1、第一步
    首先我们在项目根目录下找到package.json文件,在scripts中配置

    "scripts": {
        "serve": "vue-cli-service serve", // 开发环境
        "build": "vue-cli-service build", // 生产环境
        "test": "vue-cli-service build --mode testing" // 测试环境
      },
    

    我们根据不同的启动方式来启用不同的域。
    2、第二步
    然后我们在根目录下创建3个文件分别是

    1. .env.development // 开发环境
    2. .env.production // 生产环境
    3. .env.testing // 测试环境
      在这里插入图片描述
      然后在着3个文件中写入:
     NODE_ENV = "development" 			 ----------- 开发环境配置
     NODE_ENV = "production"			---------------生产环境配置
    NODE_ENV = "testing"			--------------------	测试环境配置
    

    3、第三步
    在根目录下的src文件中,新建一个config文件夹,专门用来保存我们的环境变量
    在这里插入图片描述
    在上面3个文件导出相应的baseUrl域名。
    如:

    module.exports = {
        baseUrl:"http://www.development.com"
    }
    // 开发环境
    

    然后在index.js中引入一下

    const config = require("./env." + process.env.NODE_ENV);
    // process.env.NODE_ENV 我们使用哪个方式运行,就会引入相应的baseUrl
    module.exports = config;
    // 最后导出
    

    4、第四步
    在我们根目录下的src文件内main.js文件中引入

    import {baseUrl} from "./config/index";
    // 因为导出的是一个对象,结构赋值
    console.log(baseUrl);
    

    注意:在打包时,需要额外配置一个js文件
    在根目录下创建vue.config.js文件,然后写入

    module.exports = {
      publicPath: "./"
      // 路径都换为 ./
    };
    
    展开全文
  • 一看就懂的vue环境变量配置这是基于cli3.x版本的环境变量配置指南。没有过多复杂的介绍,只有极简的实用配置。旨在给需要的朋友提供帮助以及自己温故知新,真正一看就会懂,懂了就能用。项目开发过程中,至少会经历...

    一看就懂的vue环境变量配置

    这是基于cli3.x版本的环境变量配置指南。没有过多复杂的介绍,只有极简的实用配置。旨在给需要的朋友提供帮助以及自己温故知新,真正一看就会懂,懂了就能用。

    项目开发过程中,至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同,若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生,我们只需做简单的配置,把环境状态切换的工作交给代码。

    5409bd221be7

    如上,三个".env"文件后缀名为development、production、test,分别对应为开发环境、生产环境和测试环境

    .env.development

    5409bd221be7

    .env.production

    5409bd221be7

    .env.test

    5409bd221be7

    在 vue-cli-service 命令后加上对应".env"文件名字。配置完成后,当我们运行npm run xxx命令时会执行对应的".env"文件。从而实现环境变量配置功能。

    5409bd221be7

    配置vue.config.js文件

    在根目录下新建 “vue.config.js” 文件,并打印process.env.VUE_APP_SERVER_URL的内容,然后运行npm run serve命令。可以看到命令行在执行“vue-cli-service serve”的同时加上了“--mode development”,紧接着输出了“.env.development”文件内的接口地址————“http://development”。说明此时我们的环境变量已经配置成功了!

    接下来运行npm run build命令

    5409bd221be7

    我们发现命令行执行了“vue-cli-serve build”的同时加上了“--mode production”,并且输出的接口地址也对应更改了。再看左侧目录下新增了一个打包后的文件夹。再次说明我们的环境变量已经配置成功了!

    最后再极其不愿的执行npm run test命令

    5409bd221be7

    呐,同样做了对应的输出与更改。至此,我们的vue环境变量配置圆满成功!

    需要注意,在使用的时候记得调用process.env变量哦

    5409bd221be7

    顺便一提,在生产环境下记得设置productionSourceMap值为false,以减少打包后的项目体积(大概能减少百分之六七十左右),这只是vue项目优化的一个点,此处不做过多讲解,有关项目优化内容下次再单独写一篇文章。

    5409bd221be7

    2.x

    varroot = process.env.NODE_ENV=='production'?'生产':'开发'

    ".env"文件命名不一定非要development、production、test。是可以自定义的,前提是得在package.json里面做对应的名称修改!(注意命名要语义化方便理解)

    展开全文
  • 环境变量问题就是为了解决这个问题的。 2.配置 多环境变量的配置:首先在packages.jon==》scriprs(启动)==》三种启动(开发(serve)+测试(test)+生产/打包(bulid)) 每种启动方式,带一个定义的模式共三种 1....

    1.了解

    我们在开发的时候 通常需要去操作三个服务器去确保我们开发的质量,开发环境为一个服务器。测试一个服务器,上线时又需要一个服务器。 多环境变量问题就是为了解决这个问题的。

    2.配置

    多环境变量的配置:首先在packages.jon==》scriprs(启动)==》三种启动(开发(serve)+测试(test)+生产/打包(bulid))

    每种启动方式,带一个定义的模式共三种

    1.开发(development)2.生产(production) 3.测试(testing/推荐:staging)

    `

     3.创建三个文件夹,用来存储环境变量(不可以乱起名字!!!)

    1.  .env.developement  2.  .env.production  3.  .env.staging 

    多环境变量有三种,1.NODE_ENV   2.VUE_APP_ENV(后面的自定义) 3.BASE_URL

     例如:NODE_ENV='development'

          VUE_APP_ENV='development'

    4.在src中创建config(自定义)文件夹下创建四个文件夹,分别是:

     1. env.development.js  2. env.production.js 3. env.staging .js  4.  index.js

    三个文件下配置url接口:{ 

    }

    而index.js 根据环境引入不同配置 process.env.VUE_APP_ENV

     

    5.在min.js中再导入

    :improt{buse_url} from '@config/index.js'

     

     

    展开全文
  • vue环境变量配置

    2020-04-11 15:48:30
    vue3.0环境变量配置 根据不同的指令: npm run serve // 搭建本地环境 npm run dev // 生成测试环境文件夹(可自定义为devdist) npm run build // 生成生产环境文件夹(一般默认为dist) 思路: 1,创建修改相关配置...
  • 引入sass 首先使用官方提供的脚手架vue-cli进行搭建框架,这里就不做说明了,查阅官网即可。 等安装完所有依赖后,安装sass的依赖包: npm install --save-dev sass-loader //sass-loader依赖于node-sass npm ...
  • vue项目的环境变量

    2019-01-04 21:08:00
    关于项目中环境变量的总结 背景 项目环境一般分为开发环境,测试环境,线上环境 因为每个环境的接口域名、webpack 配置都是不同的,所以在打包构建时,我们需要区分这些环境,这时就用到了环境变量 在工作中使用到了...
  • 为什么配置多环境变量呢? 在我们开发的过程中,会有多个不同的访问环境比如:开发环境 、 生产环境 等等。在每一种环境下所需要访问的域名都是不一样的,所以可以通过配置多环境变量来解决这一问题。 一、在Vue...
  • 线上环境由于每一个环境的接口域名、webpack 配置都是不一样的,因此在打包构建时,咱们须要区分这些环境,这时就用到了环境变量在工做中使用到了两种方法来区分,下面将这两种方式一一列举出来技术框架是vue-cli@2....
  • vue项目中配置环境变量 此篇文章是在网上看到的,项目中我采用的是第二种方式,此文章出处. 1.环境背景 项目环境一般分为开发环境,测试环境,线上环境 因为每个环境的接口域名、webpack 配置都是不同的,所以在打包...
  • 今天给大家分享一个vuecli3.x + sass + .env环境变量实现网站换肤的效果。本教程实现了,文字颜色、图片、背景图片的更换效果。准备物料:脚手架:vuecli3.xnpm包:node-sass,sass-loader环境变量文件:.env.a, ....
  • 利用webpack打包代码时,如果需要区分生产和开发环境分就需要用到环境变量。 webpack环境变量配置 首先需要在webpack 命令行配置 --env: webpack --env.production # 设置 env.production == true webpack --env....
  • No No No 用上环境变量之后会根据命令自适应。 贴上代码······· 1:src新建utils目录 /新建request.js import axios from 'axios' // import { Message, MessageBox } from 'element-ui' // import ...
  • 当执行 vue-cli-service [参数] 会执行打包文件,根据参数的不同会去读取指定的文件,传入不同的环境变量 默认的环境变量配置文件 .env 全局默认配置文件,无论什么环境都会进行加载合并 .env.development 开发环境...
  • 使用Vue-cli 创建webpack项目时,模板默认提供dev和build脚本,dev为直接在本地启动服务器,build为打包生产环境,但是有些时候我们如果想打包一个自定义的环境(预演环境)的话,需要我们自定义一个环境,借鉴网上...
  • vue-cli3环境变量与分环境打包

    千次阅读 2019-02-15 11:56:55
    第一步 : 了解环境变量概念 我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode]....
  • VUE中通过process.env判断开发,测试和生产环境,并分环境配置不同的URL 通过process.env做判断和处理 1,找到项目配置文件夹: config文件夹 2,进入如下三个文件: dev.env.js 对应开发环境 test.env.js 对应测试...
  • vue-cli3.0 环境变量与模式

    千次阅读 2018-09-18 15:43:01
    在项目过程中,一般分为dev、release、prod环境,也就是开放、测试、预发布、发布等,没当这个时候,之前都是手动修改配置文件,但是是可以通过命令直接修改的,前提是自己写好脚本,废话少说,下面举例子说明: ...
  • vue引入js

    千次阅读 2018-01-29 21:10:17
    Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库。当项目变得复杂庞大,通常会将代码进行模块化拆分。可能还需要跑在不同的环境下,比如浏览器,服务端。 如何在各个模块和组件...
  • Vue CLI中 模式和环境变量详解

    千次阅读 热门讨论 2021-05-26 16:36:04
    这里就需要引入环境的概念。 一般一个项目都会有以下 3 种环境: 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能); 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会...
  • 为什么要设置和读取环境变量 简而言之就是,通过环境变量传参,能让我们在不修改任务代码的情况下执行不同的逻辑。
  • 因此,我们就会遇到某些变量会根据不同的环境进行变动。例如,后端暴露给前端的API地址。在development环境中,API地址可能是后端的开发主机地址;但是到了production环境,API地址就变成了服务器主机地址。面对这种...
  • VUE 引入插件的区别

    2020-10-12 16:36:02
    import global from './global.js' //我自己创建的全局变量函数文件 Vue.prototype.$echarts=echarts; Vue.use(global) 于是就对上述两种方式引入产生了疑问,这两种方式引入有什么区别吗? 通过资料查询,了解到...
  • vue-cli的自定义环境变量的配置和引用 在‘scripts’对象中写上自定义命令行命令dev-login,执行的时候就可以直接使用npm run dev-login // package.json文件 { "name": "enterprise-university", "version": ...
  • vue-cli3 配置 vue.config.js 环境变量env

    千次阅读 2019-10-13 18:58:56
    const path = require("path"); const uglifyJsPlugin = require("uglifyjs-webpack-plugin"); const IsProduction = process.env.NODE_ENV === ...// 引入文件 function resolve(dir) { return path.jo...
  • vue-cli的index.html中使用环境变量

    千次阅读 2020-01-03 10:35:19
    项目中使用了公司定义的统一头部文件,需要引入header.js和header.css。负责人希望各个环境引入各自的js和css。 ...感觉很麻烦。 翻阅cli官方文档后看到了这样一段话。....env.xxx环境文件中定义变量...
  • 在我们使用vue-cli创建的项目中,默认只有开发development和生产production两种环境变量;但在实际的项目开发过程中往往都会有测试环境,下面就来说一下如何适配测试环境test的环境变量。 1、在项目的config目录...
  • 这个文件配置项是我结合了多个大神的设置和官方文档想出来的即配置了jquery也配置了区分生产环境和开发环境变量,但是变量还没有试过,项目就被别人接手了,在最后一周里我新开发了另一个模块,周六项目一上线就被...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,251
精华内容 6,100
关键字:

vue怎么引入环境变量

vue 订阅