vue項目如何打包先後端不分離發佈手把手教學apache、nginx

vue項目如何不分離發佈

一、首先yarn build

　　我用了vue-cli腳手架，bulid後的dist文件夾裏的index.html有加版本號，那麼爲何須要加版本號呢？

　　a、回滾

　　b、解決瀏覽器緩存的問題

 

---

 

 

二、咱們使用apache或者nginx幫助咱們

2a、apache

　　　　這裏我用的是XAMPP

　　　　1>把apache打開(我這裏是點擊start)

　　　　

　　　　2>點擊後青青草原綠

　　　　

　　　　

　　　　3>etc文件下的->http.conf文件(不一樣人電腦這個文件的路徑好像不同，自行查找)

            

 

　　　　

---

 

　　　　

　　　　4>打開該文件之後咱們須要對文件進行部分修改

　　　　　　4.1>首先找到DocumentRoot

           　　 

　　　　　　這兩行的內容須要改變，能夠任意創建一個文件，

　　　　　　只要把build打包後的dist放在你創建的這個文件裏就好，

　　　　　　此處的兩個路徑都填你創建的這個文件的路徑

　　　　　　我此處填的是

　　　　　　

　　　　　　有可能會提示你權限不足，已管理員身份重試便可

　　　　　　

　　　　　　

---

 

 

　　　　　　4.2>找到你的listen ，最好設置成80

　　

　　　　5>此時不必再用localhost打開你的項目，你可使用hostadmin配置一個假域名，便於你調試使用

　　

　　　　6>但此時你用你的假域名打開不了你的項目，一片爆紅包裹着你，此時你打開你的index.html你會發現的引入的js文件等等路徑寫的都是/../..，換了衣服的你他認不出來了，那麼你就須要從新build再build以前在你的配置文件vue.config.js中配置baseUrl：‘／dist／’具體參照官網

　　　　

　　　　　此時你驚喜地發現改了這個配置之後，你還須要改變你的vue-router的配置，須要配置apache

　　　　　官網也給了

　　　　　

　　　　　　把這一段話放在http.conf找個位置放下吧，而後修成改這個樣子

　　　　　　

　　　　　7>apache反向代理配置　　　　

 

---

 

 

2b、nginx(部分步驟與2a重複因此簡寫)

　　1>修改vue.config.js

　　　　加上baseUrl:‘／dist／’

 

　　2>修改路由

　　　　修改router下的index.js

　　　　本來是

　　　　改爲

 

　　3>找到你nginx文件夾

　　　　

 

　　　　在裏面建立一個conf.d文件夾，文件夾裏隨意建立任意文件 

 　　　　添加以下代碼

server { 
    listen 80; 
    server_name localhost;
     root 你的dist所在的文件夾的路徑;             
    autoindex on; 
    expires 1s; 
    charset utf-8;

    location /ajax { proxy_pass 你接口反向代理的target; }

    location / { try_files $uri $uri/dist /dist/index.html; } 
}        

　　

---

 

 

小小一總結

帶二級目錄的Apache配置

• step1: 修改 vue.config.js 添加配置 baseUrl: '/dist/',

• step2: 修改 router/index.js const router = new VueRouter({ mode: 'history', base: '/dist/', routes })

• step3: 修改apache 配置 添加：

RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /dist/index.html [L] -

• step4: apache 反向代理配置

帶二級目錄的Nginx配置

• step1: 修改 vue.config.js 添加配置 baseUrl: '/dist/',

• step2: 修改 router/index.js const router = new VueRouter({ mode: 'history', base: '/dist/', routes })

• step3: 配置nginx 在本地目錄下，建立conf.d文件夾，裏面隨意建立任意文件 添加以下配置： server { listen 80; server_name localhost; root dist文件夾(dist爸爸)所在的路徑; autoindex on; expires 1s; charset utf-8;

  location /ajax { proxy_pass 反向代理的target; }

  location / { try_files $uri $uri/dist /dist/index.html; } }