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には、正式な環境とテスト環境と一致する関連項目があります.