vue項目 既能通過ip訪問項目，又可以本地localhost訪問

1.場景問題：

有時候開發過程中，vue項目需要其他同事能訪問你本地進行調試，而不是需要重新拉取代碼來啟動很麻煩

2.解決思路：

一. package.json
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0"

二. /config/index.js
host: '0.0.0.0',

 

---

 

未完待續：

現在通過本地是可以訪問了。。。

 

 但是同事訪問過程中發現接口出現了跨域的問題：

 

 

 

通過查詢得知：

在dev環境下的跨域問題解決

1.項目使用的是axios請求網絡,將baseUrl修改為/api (這里是使用webpack提供的代理功能將/api代理成目標接口host)

axios.defaults.baseURL = '/api';

2.進入config/index.js里,在dev下增加proxyTable配置,可以匹配到/api,將其代理成目標接口host

dev: {
 
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
//////////////////////////////////////////////////////////////
    proxyTable: {
      '/api': {
        target: 'http://192.168.1.111:8080/',//目標接口域名
        changeOrigin: true,//是否跨域
        pathRewrite: {   // 加上這個重寫配置后跨域問題就解決了
          '^/api': ''//重寫接口,后面可以使用重寫的新路徑，一般不做更改
 }
      }
    }
//////////////////////////////////////////////////////////////
}

此時已經解決了dev下的跨域問題

3.進入package.json,在dev字段下增加 " --host 0.0.0.0 ",這樣就可以真機通過ip地址訪問項目,進行調試

"scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }

 

擴展：

在生產環境下的跨域問題解決

需要用nginx來做代理，詳情可看我的博客nginx配置vue項目