当前位置:首页 > 前端 > Vue.js

vue-cli3.0设置环境变量与模式的方法

Vue.js 2019-08-19

概述

       Vue脚手架作为当前最炽手可热的框架,各种配置使用起来也是非常方便,比如开发、测试以及生产环境会有不能的api接口服务地址、打包分流、也可到项目的任意页面直接使用process.env.NODE_ENV获取全局变量等等,通过环境变量与模式可以很好的配合我们开发,减少不必要的疏漏和工作量。

1、创建项目

       通过vue-cli 3.0创建项目,如何安装vue-cli,请移步进vue-cli官网

  1. vue create project-name

2、环境变量与模式所需的文件

  1. .env.dev // 开发环境
  2. .env.prod // 生产环境
  3. .env.test // 测试环境

       新建文件如下图:
alt=vue-cli3.0设置环境变量与模式
       文件变量声明如下图(声明了一个环境变量 NODE_ENV):
alt=vue-cli3.0设置环境变量与模式

3、package.json文件里面设置—mode关联绑定环境配置文件

        scripts里面的变量是核心

  1. {
  2. "name": "eslint-standard",
  3. "version": "0.1.0",
  4. "private": true,
  5. "scripts": {
  6. "serve": "vue-cli-service serve --mode dev",
  7. "build.test": "vue-cli-service build --mode test",
  8. "build": "vue-cli-service build --mode prod"
  9. }
  10. }

4、vue.config.js设置输出目录

  1. module.exports = {
  2. lintOnSave: false,
  3. outputDir: `dist-${process.env.NODE_ENV}`
  4. }

5、最后分别执行命令检查配置是否成功

  1. npm run build.test
  2. npm run build

       结果显示正常输出了文件夹以及文件,如果报错那就检查下自己的配置是否正确:
alt=vue-cli3.0设置环境变量与模式

< 上一篇 下一篇 >
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部