Vue 2.x 3.x 配置項目開發環境跟線上環境

先找到package.json  （這是nuxt版的vue 可能會跟通常vue不同  固然整體上差很少的）

"scripts": {
    "dev": "cross-env NODE_ENV=development nuxt",
    "pro": "cross-env NODE_ENV=production nuxt",
    "pre": "cross-env NODE_ENV=prerelease nuxt",
    "build-prod": "cross-env NODE_ENV=production nuxt build",
    "build-prer": "cross-env NODE_ENV=prerelease nuxt build",
    "build-test": "cross-env NODE_ENV=development nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

 

 環境篇（瞭解項目環境）  

　1.  dev環境

　　"dev": "cross-env NODE_ENV=development nuxt"

預生產環境

　　"pre": "cross-env NODE_ENV=prerelease nuxt",

生產環境

　　"pro": "cross-env NODE_ENV=production nuxt",

2.Prod上線 環境篇 命令行（num run build）


測試版上線打包

　　"build-test": "cross-env NODE_ENV=development nuxt build",

預生產上線打包

　　"build-prer": "cross-env NODE_ENV=prerelease nuxt build",

生產版上線打包

　　"build-prod": "cross-env NODE_ENV=production nuxt build",

關於package.js 的命令講解完了接下來解釋一下   NODE_ENV

NODE_ENV 就是項目全局的變量可自定義，定義的地方就是上門咱們解讀咱們啓動項目package.js命令裏面（上面列舉的"環境篇"）

NODE_ENV = "自定義名稱" 



使用篇 (既然配置好了環境變量那麼該怎麼使用呢?)

1.本地環境Axios請求的配置

process.env.NODE_ENV 就是咱們定義變量

例如在配置項目本地開發請求跟線上請求的時候作個判斷

if (process.env.NODE_ENV == 'production') {
    //線上
  axios.defaults.baseURL = "https:xxx.xxx.xxx"

} else if (process.env.NODE_ENV == 'development') {
    //本地
  axios.defaults.baseURL = 'http://192.168.1.1:80'

} else {
    //預發佈
  axios.defaults.baseURL = 'http://xxx.xxx.1.1:80' //

}

   2. 線上環境的請求配置

通常來講線上項目可能會有涉及到跨域的問題

在vue的配置文件能夠設置 porxy跨域代理 (爲何axios不能跨域這個問題本身百度)

vue項目通常來講依賴Node啓動 vue跨域的原理就是在當前環境啓動一個Node服務器 而後服務器跟服務器以前訪問解決了跨域問題

VueCli 2.x的項目的配置文件在根目錄的 config - index.js  具體配置請自行百度


* 特別說明一下VueCli3.x 的環境配置  須要本身在根目錄新建.env.development  或者.env.production 文件

// .env.development

NODE_ENV = 'development' 
VUE_APP_CURRENTMODE = 'dev' 

VUE_APP_BASEURL = '本地開發api地址'


//例如
VUE_APP_BASE_API='192.xxx.xxx.1:80'

　

新出的VueCli3搭建的項目運行很快不得不點贊

VueCli 3.x的跨域配置 根目錄 自行新建個  vue.config.js文件 自行配置 線上/api  預發佈 /pre

module.exports = {
    // 修改的配置
    // 將baseUrl: '/api',改成baseUrl: '/',
    baseUrl: '/',
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.example.org',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
        }
    }
}