vue开发环境、正式环境的配置及原理

一、生产环境及正式环境的配置（为了更好地理解，我把起始项目中的代码也进行了展示）

congif > dev.env.js：开发环境

congif > prod.env.js：正式（生产）环境

1.1、起始项目中的配置

（1）开发环境原有的代码

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

（2）正式（生产）环境原有的代码

module.exports = {
  NODE_ENV: '"production"'
}

1.2、配置开发环境和正式（生产）环境环境，为了我们发的请求可以自动识别是开发还是正式（生产）

（1）开发环境代码的配置

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://192.168.1.63:8080/IEMS/v1"',//开发环境的url
)}

（2）正式（生产）环境代码的配置

module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://192.168.1.118:8080/IEMS/v1"',//正式环境的URl
}

（3）使用

const service = axios.create({
  baseURL: process.env.BASE_API,//自己定义一个baseURL，这里我写在了实例里面
})

 

1.3、原理

刚接触这一块的时候感觉只配置就可以进行识别，是不是太过于神奇了？其实配置过之后可以进行自动识别是webpack在我们的vue项目进行生成的时候就为我们进行了做了前提工作，在这里我就谈谈我自己的理解

（1）自动生成的build > webpack.base.conf.js中：（代码太多只截取了部分需要的代码）

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'// 配置webpack编译入口
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'// webpack编译输出的发布路径(判断是开发环境或者生产环境等)
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
}

 

 对于这句话：

publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath

可以通过npm run dev（开发环境）   npm run build（正式环境）进行判断是生产环境还是正式环境

（2）自动生成的build > webpack.dev.conf.js是开发环境的配置

（3）自动生成的build > webpack.prod.conf.js是正式环境的配置

（4）自动生成的config > index.js里面有可以和正式环境和测试环境相匹配的相关项