vue项目实际开发的问题及实用技巧分享（四:环境变量配置）

一般情况下，一个完整的系统开发必须要经历的三个阶段：开发=>测试=>上线，当开发一个项目时不可避免就需要开发、测试、正式3个环境，如果与第三方交互系统则还需要一个用户交付测试环境。那么我们在开发工程中针对不同的环境的某些业务可能就会需要有不同的处理方式，这时候就得配置我们的环境变量了。

那么vue中环境变量到底是什么，具体用来做什么呢？

举个简单的例子吧，本地的vue项目启动了，直接通过“127.0.0.1:端口号”或者“localhost:端口号”来访问，然后我们发布到测试环境通过“http://www.test.com（仅示例）”来访问，然后正式环境访问地址又是“http://www.product.com（仅示例）”。这时我们项目中的接口访问地址肯定都是随着我们访问的环境来改变的。那么我们打包的这些跟随环境去改变访问接口地址的东西就是我们需要配置的环境变量了，简单概括一下就是根据不同的访问环境赋予地址变量不同的值。

先简单给大家介绍一下实现方式吧。

可能大家启动vue_cli项目经常会用到的命令都是npm run dev || npm run serve || npm start

首先脚手架搭建项目产生的目录是这样的　

　

查看pasckage里面的启动命令

 

这里指向了build/webpack.dev.conf.js

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

这里不难看出devServer.post取值有两个来源，一个是config.js配置的一个是process.env.HOST

那么，什么是.process.env呢？我们可以打印看一下

可以在命令行打印输入查看一下

 简单来讲，process.env 是Node.js 中的一个环境，而且process.env在Vue CLI 项目是一个重要的概念。（详见官档）

 也就是说vue-cli构建的项目其实完整的环境变量目录应该是包含这两个文件的

 

 那么里面具体需要配置些什么内容，怎么控制呢？

简单理解，不同环境下，使用不同的环境变量，我们就运行不同的环境就是我们的目的，所以需要配置在环境变量里的配置可以是诸如公用的服务器配置、公用接口地址、端口等

下面我配置了一个.env.staging文件可以参考一下

# 标题
VUE_APP_TITLE = 测试

# 测试环境配置
ENV = 'staging'

# 测试环境请求地址(仅示例）
VUE_APP_BASE_API = 'https://test.com'
#端口
VUE_APP_BASE_PORT = '8080'

然后再package.json文件里加入如下配置

 然后npm run dev:stage运行项目后就可以在全局使用process.env.VUE_APP_BASE_API进行访问测试请求地址。

以上就是个人对环境变量（vue2)配置的一些总结，如有分歧，欢迎大家一起来探讨，感谢各位的阅读