版权声明:如果喜欢,就收藏吧 O(∩_∩)O~ https://blog.csdn.net/caseywei https://blog.csdn.net/caseywei/article/details/89449653
一、生产环境及正式环境的配置(为了更好地理解,我把起始项目中的代码也进行了展示)
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里面有可以和正式环境和测试环境相匹配的相关项