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"
  },

環境篇（瞭解項目環境）

本地開發環境

• dev環境
  "dev": "cross-env NODE_ENV=development nuxt"

• 預生產環境
  "pre": "cross-env NODE_ENV=prerelease nuxt",

• 生產環境
  "pro": "cross-env NODE_ENV=production nuxt"

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 就是項目全局的變量可自定義，定義的地方就是上門咱們解讀咱們啓動項目package.js命令裏面（上面列舉的環境篇)
• NODE_EVN = "自定義名稱"

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

• 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' //
}

線上環境的請求配置

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

• 在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 預發佈

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