未打包前,前端vue可通過proxy解決跨域問題,當打包上線之后,內置代理將會失效,我們需要使用nginx來解決跨域問題。
首先,通常打包都是使用npm run build命令來進行打包的,但有時間也不一定,可以查看package.json文件scripts下build直接執行即可;
執行完后會生成一個dist文件,里面會將靜態文件打包成static和一個index主頁;
安裝Nginx之后
我們將dist文件放到nginx中的html文件夾下,再進入conf文件夾下的nginx.conf配置文件進行修改
執行nginx命令,start nginx, //關閉nginx nginx -s quit //重啟nginx nginx -s reload
打開網頁localhost:8888就會顯示主頁面了。
其中心得:我們有時候需要采用逆向思維,例如跨域問題,我們可以從請求網頁中找信息,看請求信息的地址url是否有/prod-api拼接,如果沒有,肯定會出現后台數據訪問不到的現象
跨域的目標地址,因為服務器端也是在本機,所以直接使用127.0.0.1:+端口即可;(不要使用映射地址,不然會出問題,訪問不到)。