前后端部署到同一域名 · yylAdmin開發手冊

前端和后端部署在同一個域名下，可以解決跨域問題，可以通過下面兩種方法設置。 > 當然前后端分開部署正常情況下也不會有跨域問題，yylAdmin已經做了跨域處理。 ### 一，默認打包路徑 1、把 yylAdminWeb/.env.production.domain 文件重命名成 .env.production.local； 2、運行打包命令 cnpm run build:prod； 3、把 yylAdminWeb/admin 文件夾復制到 yylAdmin/public 文件夾下 yylAdmin/public/admin； 4、部署yylAdmin到服務器上，瀏覽器打開：你的域名/admin/。 ### 二，自定義打包路徑 #### 設置前端環境接口 baseURL 把.env.production環境文件中的接口 baseURL 設置為空：VUE_APP_BASE_URL = ''。 > 可以根據打包環境修改對應文件，如果打包測試環境，就在.env.staging中修改。 ![](https://skyselang.gitee.io/yylAdminDoc/img/course/same-domain-name/1-env-prod.png) #### 配置路徑和打包目錄、打包把.vue.config.js配置文件中的公共路徑publicPath設置為/admin/,打包路徑outputDir設置為admin。運行打包命令： ~~~bash cnpm run build:prod ~~~ > 這兩個路徑名稱可以自定義，但是名稱必須一樣；如果修改的是測試環境文件，運行：cnpm run build:stage ![](https://skyselang.gitee.io/yylAdminDoc/img/course/same-domain-name/2-vue-config-js.png) #### 復制打包目錄到yylAdmin/public文件夾下把前面打包后生成的目錄admin復制到后端public文件下 > 就是把yylAdminWeb/admin文件夾復制到yylAdmin/public文件夾下：yylAdmin/public/admin ![](https://skyselang.gitee.io/yylAdminDoc/img/course/same-domain-name/3-copy-yyladmin-public.png) #### 本地測試一下是否能訪問 http://localhost:9526/admin/ > http://localhost:9526是后端地址，/admin/是前面設置的公共路徑 ![](https://skyselang.gitee.io/yylAdminDoc/img/course/same-domain-name/4-localhost-open.png) #### 部署yylAdmin到服務器上、訪問你的域名/admin/ > 輸入部署后端域名，再加上公共路徑就可以訪問了 ![](https://skyselang.gitee.io/yylAdminDoc/img/course/same-domain-name/5-pro-open.png) #### 前臺前端同樣，可以把前臺前端（web、h5）、后臺前端（yylAdminWeb）與后端（yylAdmin）放到同一個域名下，這樣也不會有跨域問題。