CF Round 788 Div2 題解
跨域問題
1. vue中可以設定代理，來解決跨域.
問題1:第一次打包，報錯，請求不到
解決：在vue.config.js中設定相對路徑 publicPath:’./’
問題2:第二次打包，頁面顯示不出來圖片
解決：如果後端不做重定向的話，那麼要路由改為hash
問題3:第三次打包，報錯，因為代理只在開發階段生效
解決：做開發環境和生產環境的配置
.env.development(開發環境)
//頁面標題
VUE_APP_TITLE=小鹿線入學管理系統
//開發環境配置
ENV = 'development'
//小鹿線入學管理/開發環境
VUE_APP_BASE_API='http://不好/api'
.env.production（生產環境）
//頁面標題
VUE_APP_TITLE=小鹿線入學管理系統
//開發環境配置
ENV = 'production'
//小鹿線入學管理/開發環境
VUE_APP_BASE_API='http:localhost:3000'
vue.config.js(設定跨域)
let path = require("path");
module.exports = {
publicPath:'./',
//代理
devServer: {
proxy: {
'/api': {
target: "process.env.VUE_APP_BASE_API",
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
},
},
/*@的路徑*/
configureWebpack: (config) => {
config.resolve = {
extensions: ['.js', '.json', '.vue'],
alias: {
'@': path.resolve(__dirname, './src'),
}
}
}
}