vue專案如何打包前後端不分離釋出手把手教學apache、nginx
vue專案如何打包前後端不分離釋出手把手教學apache、nginx
vue專案如何不分離釋出
1、首先yarn build
我用了vue-cli腳手架，bulid後的dist資料夾裡的index.html有加版本號，那麼為什麼需要加版本號呢？
a、回滾
b、解決瀏覽器快取的問題
2、我們使用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; } }