Vue的全局配置实践

/ vueapi安全 / 没有评论 / 248浏览

Environment

有时候开发环境和生产正式环境的配置复杂,每次build都需要更改一些全局的配置项

"node": ">= 6.0.0",
"npm": ">= 3.0.0",
"vue": "^2.5.2",
"vue-clipboard2": "^0.3.1",
"vue-router": "^3.0.1",

Config

Dev -- > ./config/dev.env.js

dev的配置比较简单明了

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  // 下面这两个自己定义
  API: '"http://localhost:8000"',
  KEY:'"XXXX"'
})

Prod --> ./config/prod.env.js

生产环境的需要一级一级去找,去确认,配置文件详细解释建议参考 :https://www.cnblogs.com/ye-hcj/p/7096341.html

  1. package.json

找到scripts模块

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  1. ./build/build.js

    // 生产模式的webpack配置文件
    const webpackConfig = require('./webpack.prod.conf')
    
  2. ./build/webpack.prod.conf

    const env = require('../config/prod.env')
    

    生产环境配置

'use strict'
module.exports = {
  NODE_ENV: '"production"',
	// 下面这两个自己定义
  API: '"https://XXX-api.XXX.com"',
  KEY:'"XXXX"'
}

Demo

如何调用

console.log('XXX'+process.env.KEY)

In addition

可以在package.json 中配置N个环境,不仅限于Dev和Prod了,可以加上版本之类的管理,比如

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "dev_v1": "webpack-dev-server --inline --progress --config build/webpack.dev_v1.conf.js",
    "prod_v1": "webpack-dev-server --inline --progress --config build/webpack.prod_v1.conf.js",
  },

效果

⚡ npm run dev_v1

> XXX@1.0.0 dev_v1 XXX
> webpack-dev-server --inline --progress --config build/webpack.dev_v1.conf.js

 95% emitting                                                                           

 DONE  Compiled successfully in 9485ms                                                                                                                                                                                                                                              00:35:26

 I  Your application is running here: http://localhost:8080