Vue項(xiàng)目打包部署的方法是什么

這篇文章主要講解了“Vue項(xiàng)目打包部署的方法是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue項(xiàng)目打包部署的方法是什么”吧！

前提準(zhǔn)備

我們需要準(zhǔn)備一個(gè)vue項(xiàng)目（vue-cli3或vue-cli4）、一個(gè)nginx服務(wù)器

部署流程

• 配置vue.config.js中的publicPath

• 配置vue-router的模式為history

• 配置vue-router中的base（基態(tài)路由【與服務(wù)端配合】）

• 使用npm run build生成dist文件夾

• 配置nginx代理（進(jìn)行生產(chǎn)環(huán)境下的反向代理，注意生產(chǎn)環(huán)境下devServer無效【或者你可以配置devserver的根目錄是dist都可以】）

• 配置nginx路由

vue.config.js

如果你的項(xiàng)目中沒有這個(gè)文件，直接在項(xiàng)目根目錄創(chuàng)建它即可

1.配置publicPath

這里我們配置publicPth為路由/vue/

module.exports = {
    // /vue/這個(gè)名字你自己起，也可以用我這個(gè)
    publicPath: process.env.NODE_ENV === "production" ? "/vue/" : "./",
    outputDir:'dist',
}

為了兼容各種情況，我強(qiáng)烈建議大家路由寫成/vue/而不是寫成/vue

vue-router

1.配置路由模式和基礎(chǔ)路由

export default new Router({
    // history模式，需要和服務(wù)端配合才能在生產(chǎn)環(huán)境下正常使用
    mode: 'history',
    // 基本路由，這個(gè)名字可以自己起，但是要注意和vue.config.js里面publicPath所起的名字一致
    base:'/vue/',
    routes:[]
})

npm run build

我們在vue項(xiàng)目根目錄下運(yùn)行npm run build就可以進(jìn)行項(xiàng)目的打包了。打包后會生成dist文件夾，把它放進(jìn)nginx的html文件夾下即可

nginx

1.配置nginx代理

有些時(shí)候我們需要請求一些跨域服務(wù)，在開發(fā)時(shí)，我們可以配置devServer的proxy實(shí)現(xiàn)跨域訪問。

但是在npm run build后，我們會發(fā)現(xiàn)代理無效。這是因?yàn)樯a(chǎn)環(huán)境下的文件已經(jīng)脫離devServer了，所以自然代理就沒有用了，所以一般生產(chǎn)環(huán)境代理我們使用nginx去做

location /api/{
    proxy_pass  http://121.36.94.221:6600/;
    index  index.html index.htm;
}
location /info/{
    proxy_pass  http://ckk.xiaoandcai.cn/;
    index  index.html index.htm;
}

假設(shè)我們的nginx服務(wù)器的端口號是8080,

那么我們做跨域請求時(shí)候只需要訪問：localhost:8080/api就行了，這樣做我們就相當(dāng)于訪問那個(gè)服務(wù)器下的資源

但是一般部署項(xiàng)目的時(shí)候我們不會發(fā)送axios去請求localhost:8080/api，我們會直接請求/api

舉個(gè)例子

//不會這樣做，因?yàn)椴渴鸱?wù)器后地址要換成ip，不然會404
axios.get("localhost:8080/api")
//你可以選擇這樣做，但是我們不推薦
axios.get("ip:8080/api")
//我們推薦這樣做，讓axios根據(jù)相對路徑補(bǔ)全ip+端口，這樣比較省心【但是要注意你的項(xiàng)目要部署在nginx代理服務(wù)器下。如果你不部署的話相對路徑也是不行的，畢竟你都沒部署人家nginx服務(wù)器上，自然你的項(xiàng)目就不是nginx家的孩子，所以相對路徑的小名，nginx怎么能認(rèn)識呢？】
axios.get("/api")

2.配置nginx路由

location / {
    root   html;
    index  index.html index.htm;
    autoindex on;       #開啟nginx目錄瀏覽功能
    autoindex_exact_size off;   #文件大小從KB開始顯示
    charset utf-8;          #顯示中文
}
# 寫我們的路由暗號/vue
location /vue{
    # alias后面寫項(xiàng)目所在目錄 xxxxxxx一定要注意，不能寫成D:\nginx\nginx-1.20.0\html\dist，要寫成斜杠/形式，否則會404
    alias D:/nginx/nginx-1.20.0/html/dist;
    charset utf-8;          #顯示中文
}

現(xiàn)在啟動nginx服務(wù)器輸入localhost:8080/vue就可以訪問我們的vue項(xiàng)目了

感謝各位的閱讀，以上就是“Vue項(xiàng)目打包部署的方法是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue項(xiàng)目打包部署的方法是什么這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！