vue-cli@2.X中的配置

主要解決的是接口問(wèn)題和路徑問(wèn)題

1. 后臺(tái)配置了允許跨域時(shí)的配置步驟（側(cè)重接口問(wèn)題處理）

1.1 第一步: 在 /config/dev.env.js中添加如下代碼:

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

  // 添加下面這行代碼: 表示在開發(fā)環(huán)境下請(qǐng)求的服務(wù)器端接口  
  API_ROOT: ' "http://localhost:3000/api" '   
})

1.2 第二步: 在 /config/prod.env.js 中添加如下代碼:

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

  // 添加下面這行代碼: 表示在生產(chǎn)環(huán)境下請(qǐng)求的服務(wù)器端接口  
  API_ROOT: ' "http://localhost:3000/api" '
}

1.3 第三步: 在發(fā)送axios請(qǐng)求之前，設(shè)置請(qǐng)求的基礎(chǔ)URL即可

axios.defaults.baseURL = process.env.API_ROOT;

// 注意: process.env 是一個(gè)全局變量，可以判斷當(dāng)前的環(huán)境。

2. 后臺(tái)未設(shè)置允許跨域請(qǐng)求時(shí)（側(cè)重路徑問(wèn)題處理）

2.1 第一步: 在 /config/index.js中添加如下配置

module.exports = {
  dev: {

    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    // --------------新添加的代理內(nèi)容-----------------------------
    // 原本proxyTable屬性中對(duì)象為空，在此進(jìn)行proxy代理配置（可以跨域）
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',   // target表示代理的服務(wù)器url
        pathRewrite: {     // pathRewrite表示路徑重寫，key表示一個(gè)正則，value表示別名 
          '^/api': '/api'   // 即用 '/api'表示'http://localhost:3000/api'
        }
      }
    },
    // ---------------------------------------------------------

    host: 'localhost', 
    port: 8080,   // 開啟服務(wù)器的端口
    autoOpenBrowser: false,   // 是否開啟在瀏覽器中打開
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true
  },

  build: {
  
    // build時(shí)輸出的index.html文件，可以自定義路徑
    index: path.resolve(__dirname, '../dist/index.html'),

    // build時(shí)輸出的靜態(tài)(除了index.html)資源路徑
    assetsRoot: path.resolve(__dirname, '../dist'),

    // build時(shí)輸出靜態(tài)資源的二級(jí)目錄
    assetsSubDirectory: 'static',

    // 代表打包后，index.html里面引用資源的的相對(duì)地址
    assetsPublicPath: './',

 
    // 是否開啟cssSourceMap
    productionSourceMap: true,
    devtool: '#source-map',

    // 是否開啟gzip
    productionGzip: false,

    // 需要用gzip壓縮的文件擴(kuò)展名
    productionGzipExtensions: ['js', 'css'],

    bundleAnalyzerReport: process.env.npm_config_report
  }
}

2.2 其余的配置步驟和后臺(tái)允許跨域時(shí)的步驟相同

vue-cli@3.X中的配置

主要解決的同樣是接口問(wèn)題和路徑問(wèn)題

1. 后臺(tái)配置了允許跨域時(shí)的配置步驟（側(cè)重接口問(wèn)題處理）

axios.defaults.baseURL = process.evn.NODE_ENV === 'development' ? 'devUrl' : 'propUrl'
/*
    參數(shù)解釋:
        1. devUrl  :  開發(fā)環(huán)境中請(qǐng)求的后臺(tái)url
        2. propUrl :  生產(chǎn)環(huán)境中請(qǐng)求的后臺(tái)url
*/ 

2. 后臺(tái)未設(shè)置允許跨域請(qǐng)求時(shí)（側(cè)重路徑問(wèn)題處理）

2.1. 第一步: 接口配置同上

2.2. 第二步: 路徑和axios配置如下:

2.2.1 在與package.json文件的同級(jí)目錄下創(chuàng)建 vue.config.js, 內(nèi)容如下:

詳細(xì)參考見(jiàn)網(wǎng)址:

module.exports = {
  devServer: {
    publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
    proxy: {
      '/api': {
        target: '<url>',
        pathRewrite: {
            '^/api' : '/api'
        }
      },
      '/foo': {
        target: '<other_url>'
        pathRewrite: {
            '^/foo': '/foo'
        }
      }
    }
  }
}

/*
示例: 遠(yuǎn)程服務(wù)器未處理跨域，接口為: http://localhost:3000/api/
本地開發(fā)環(huán)境中的url為: http://localhost:8080
1.  proxy: {
2.    '/api5': {
3.        target: 'http://localhost:3000',
4.        pathRewrite: {
5.            '^/api5' : '/api'
6.        }
7.     }
8.   } 
其中
第2行中的 '/api5'是自定義的本地請(qǐng)求時(shí)的名字
第3行的target表示代理的服務(wù)器url
第4行的pathRewrite表示路徑重寫
第5行的'^/api5'是一個(gè)正則表達(dá)式，表示要匹配請(qǐng)求的url中，全部'http://localhost:8080/api5' 轉(zhuǎn)接為 http://localhost:3000/api/
*/