vue+nginx設置跨域

vue項目中的配置
以vue-cli搭建的項目爲例, 在webpack配置文件 /config/index.js, 由於我們是在開發環境下使用，自然而然是要配置在dev裏面,找到 proxyTable屬性,配置如下:

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        //使用proxyTable進行跨域設置
        '/api': { //使用"/api"來代替"https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/" 
        target: 'https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/', //源地址 ，注意‘/’是否對應
        changeOrigin: true, //改變源，是否跨域
        pathRewrite: {
        // 這裏理解成用'/api'代替target裏面的地址，後面組件中我們掉接口時直接用api代替 
              // 比如我要調用'http://www.abc.com/user/add'，直接寫'/api/user/add'即可'
          '^/api': '' //路徑重寫，也可以寫成 '^/api': 'https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/'
         }
      }
    },

上面proxyTable屬性中的配置,效果就是將本地8080端口的一個請求代理到了https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/這個域名下

'http://localhost:8080/api' ===> 'https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/'

注意: 以上設置只能在開發環境下使用,打包後會出現路徑問題的
注意: Vue-cli提供的代理功能，只是讓你在開發環境下使用的，它(http-server-middleware)依賴於node環境，生產代碼應該使用npm run build然後把dist放到nginx服務器上，在nginx上配置代理地址

Vue項目部署到nginx上的跨域設置
這還沒完，現在我們要將項目部署到nginx上，此時原來可以訪問的接口又訪問不到了，所以這個時候還要對nginx進行設置。
下載安裝自行百度~~~
下載完成後目錄：

進入cong文件,打開nginx.congf文件,找到server對象裏面的listen屬性查看查看監聽的端口號(默認80端口)

在nginx根目下啓動nginx.exe,如果出現一個黑窗口一閃而過,說明啓動成功,訪問localhost:80出現此頁面則訪問成功，如果訪問不成功有可能是端口被佔用,修改上面的端口號,重啓nginx即可, 瀏覽器訪問localhost:XXXX；我因爲8080端口被佔，後面改成了8000端口！

推薦使用命令行操作nginx：

start nginx  //啓動
nginx -s stop // stop是快速停止nginx，可能並不保存相關信息
nginx -s quit // quit是完整有序的停止nginx，並保存相關信息
nginx -s reload // 當配置信息修改，需要重新載入這些配置時使用此命令
nginx -s reopen // 重新打開日誌文件
nginx -v // 查看Nginx版本

Vue項目部署在nginx上的配置
vue項目運行 npm run build 進行項目打包記得有本地靜態資源文件的需要需要webpack配置, 如下:

config文件下的index.js文件找到build屬性
assetsPublicPath: '/'   =>>>>>   assetsPublicPath: './' 

build文件下的untils文件中找到vue-style-loader
增加 publicPath: '../../'

此時打包後的dist文件可以不放置服務器環境下訪問, 直接打開dist文件目錄下的index.html就可以打開訪問，但是
這時候的靜態資源都可以被加載出來,且不會報錯,但是api訪問的話還是會報錯！！！

將打包後的dist文件裏面的內容複製一份到nginx文件中的html文件中:
打開html文件清空裏面的內容,將複製的內容粘貼進去

進入cong文件,打開nginx.congf文件,找到server屬性在裏面新增一條配置:

	location /api/ {			
		    proxy_pass https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/;			
	    }

你要訪問那個地址這裏就修改爲你要訪問的那個地址

以上配置就完成了，注意: 修改完nginx中的配置一定要重啓nginx纔可以, 切記!!!