vue history 模式打包部署在域名的二級目錄的配置指南


轉自:https://www.cnblogs.com/beyonds/p/11117338.html

  
最近在做項目,需要把項目部署在域名下的二級目錄,並且是在用vue-router的history 模式。

  我們都知道vue-router 的兩種前端基本訪問模式 hash 和history 。hash 模式后面帶#,打包的時候只需要把絕對路徑(/)換成相對對路徑(./),就可以部署在任何地方,不需要服務器配合,但是不好看,所以我們一般選擇history 模式,但是history 模式需要配合服務器的部署。

本文主要是在vue-cli3版本下,對部署在域名的二級目錄下做四處的配置:

  1. vue-router 路由的文件的配置,根據自己部署的二級目錄填寫 
    1 export default new VueRouter({
    2 mode:"history",
    3 base:"/web",

2.在vue.config.js配置文件(如果沒有新建一個,項目根目錄下)
注意: baseUrl 從 Vue CLI 3.3 起已棄用,請使用publicPath。

module.exports = {
  publicPath:"/web"
}

3.在入口文件中index.html 的head 標簽內加入 

4.最后就是部署配置,以nginx 為例   
復制代碼
server {
listen 80;
server_name localhost;
root /home/wwwroot/;
location /web {
try_files $uri $uri/ /web/index.html;
}
}
復制代碼
到此,配置和部署已經完成了,將打包好的前端靜態資源放在域名指定的根目錄下的二級(多級目錄配置同上)錄即可,

注意,以上配置是針對在history模式,部署在域名下的二級目錄以上的 配置,hash 模式 和 history 模式部署在域名根目錄不需要那么多配置

本人測試過部署過,只要按照以上配置四個地方,完全沒有問題,但是有不對之處,還請大家指出,謝謝....


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM