vue 环境配置（使用cross-env配置）

通过定义不同的打包命令，更改项目环境变量。

1、下载 cross-even(什么是’cross-even’)

npm install cross-env --save-dev

2、package.json 文件查询 scripts，在其中加入如下代码：（其为不同环境的打包命令，可自定义）。

    "build:qa": "cross-env NODE_ENV=production env_config=test node build/build.js","build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js","build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"

3、全局变量 process 接收打包时改变的环境变量。

3.1、在conifg文件中建立N(需要的n个环境)个文件夹（例如：test.env.js）：【为了环境变量模块化配置】

'use strict'
const merge = require('webpack-merge')
const testEnv = require('./test.env')module.exports = merge(testEnv, {NODE_ENV: '"testing"',EVN_CONFIG: '"test"',BASE_API:'"https://www.baidu.com/"',
})

3.2 在config文件的 index.js 中 build模块添加如下：

    prodEnv: require('./prod.env'),preEnv: require('./pre.env'),testEnv: require('./test.env'),

3.3 在build文件的 webpack.prod.conf文件中修改：【动态获取】

// const env = require('../config/prod.env')  //原来的
const env = config.build[process.env.env_config + 'Env']   //现在动态的

3.4 在build文件的 webpack.prod.conf文件中修改：【build时候的 log】

let spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config + ' mode...')
spinner.start()

3.5 本地测试打包：在config文件的 index.js 中 build模块修改如下：

 assetsPublicPath: './',

4、使用：打包后全局可使用 process.env。

vue 环境配置（使用cross-env配置）相关推荐

vue环境变量配置——process.env（详细）
在用vue框架时,经常用到两种环境,一种是开发环境,就是本地开发时的环境,一种是生产环境,就是要发布到线上的环境. 平时开发是用生产环境的,如果发布到线上时,需要切换环境为线上.如果人为去切换也是可以 ...
laravel + Vue 前后端分离之项目配置 - 开发环境
既然你来到查看这篇文章,那么你应该知道PHP 版本 >=7. 接着看一下目录 |-blog |-- api |-- front 目录外部很简单,,不多说了,赶紧看重点配置Laravel 作为前 ...
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...
Vue项目开发需要准备和配置些什么环境？
Vue项目开发需要准备和配置些什么环境? 一.首先需要安装node.js 下载:安装node.js链接安装在D盘 window+R,输入cmd,打开命令提示符窗口,输入: npm -v 检测是否安装 ...
VUE环境搭建教程以及VSCODE插件Vetur和ESlint的安装配置
*此教程适用于Windows环境下 Author:Sinclair CreateDate:2018-10-09 1.安装node.js 下载地址:Download | Node.js (LTS代表 ...
Vue环境搭建(node安装,环境配置,运行项目)
Vue环境搭建(node安装,环境配置,运行项目) 一.安装node 1.去官网下载node之后,推荐安装稳定版本(LTS)node官网下载地址 2.查看node安装成功否 node -v 查看nod ...
vue cli4 vue2 多页面打包配置与坑点
前言: 一直以来都没用上多页面打包,这次遇到个业务特殊情况,想到用多页面打包的方案来解决,于是按照vue cli 官方文档在自己的项目上配置跑了一下,果然一跑就是一堆问题.只能说事情总是比我们想象的要 ...
Laravel源码解析之ENV配置
Laravel在启动时会加载项目中的 .env文件.对于应用程序运行的环境来说,不同的环境有不同的配置通常是很有用的. 例如,你可能希望在本地使用测试的 Mysql数据库而在上线后希望项目能够自动切换 ...
从 Spring 的环境到 Spring Cloud 的配置
点击关注公众号,实用技术文章及时了解来源:https://zhenbianshu.github.io 需求不知不觉,web 开发已经进入 "微服务"."分布式&quo ...
vscode找不到python环境_在vscode成功配置Python环境
注意:如果您希望在Visual Studio Code中开始使用Python,请参阅教程.本文仅关注设置Python解释器/环境的各个方面. Python中的"环境"是Python ...

vue 环境配置（使用cross-env配置）

vue 环境配置（使用cross-env配置）

1、下载 cross-even(什么是’cross-even’)

2、package.json 文件查询 scripts，在其中加入如下代码：（其为不同环境的打包命令，可自定义）。

3、全局变量 process 接收打包时改变的环境变量。

4、使用：打包后全局可使用 process.env。

vue 环境配置（使用cross-env配置）相关推荐

最新文章

热门文章

vue 环境配置（使用cross-env配置）

vue 环境配置（使用cross-env配置）

1、下载 cross-even(什么是’cross-even’)

2、package.json 文件 查询 scripts，在其中加入如下代码：（其为不同环境的打包命令，可自定义）。

3、全局变量 process 接收打包时改变的环境变量。

4、使用：打包后全局可使用 process.env。

vue 环境配置（使用cross-env配置）相关推荐

最新文章

热门文章

2、package.json 文件查询 scripts，在其中加入如下代码：（其为不同环境的打包命令，可自定义）。