Vue項(xiàng)目部署上線全過程記錄(保姆級(jí)教程)
上線前準(zhǔn)備
1.先在vue.config.js文件中配置反向代理解決跨域請(qǐng)求問題
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
"/api": {
target: "后端url地址",
//允許跨域請(qǐng)求
changeOrigin: true
}
}
}
})
2.在vue項(xiàng)目根目錄運(yùn)行 npm run build
打包完成后會(huì)在根目錄生成dist文件夾，這個(gè)dist文件夾需要上傳到服務(wù)器
3.鏈接云服務(wù)器，在 /usr/local/ 下創(chuàng)建 web文件夾 用來(lái)存放dist文件夾
//此時(shí)已經(jīng)連接到云服務(wù)器 cd /usr/local/ mkdir web
通過可視化工具上傳dist文件夾，上傳后如下圖所示
4.安裝gcc
檢查gcc是否已經(jīng)安裝
gcc -v
如未安裝 執(zhí)行安裝命令
//centos yum -y install gcc //上一步輸出版本號(hào)的話可以跳過本步驟
以下步驟不可跳過
安裝 pcre、pcre-devel
yum install -y pcre pcre-devel
安裝 zlib
yum install -y zlib zlib-devel
出現(xiàn)complete代表成功
安裝open ssl
yum install -y openssl openssl-devel
安裝nginx（重點(diǎn)）
在 /usr/local下新建文件夾
mdkir webserve cd webserve //下載nginx wget http://nginx.org/download/nginx-1.9.9.tar.gz //解壓 tar -zxvf nginx-1.9.9.tar.gz
解壓成功，切換到安裝后的目錄
cd /usr/local/webserve/nginx-1.9.9/
依次執(zhí)行
./configure make make install
執(zhí)行完成后可以在 /usr/local/下看到nginx文件夾
進(jìn)入該文件夾
cd /usr/local/nginx/confvim nginx.conf
執(zhí)行上面兩條命令后進(jìn)入nginx配置
按i鍵進(jìn)入編輯模式
修改配置
修改完成后以此按 esc鍵 :wq 保存設(shè)置
啟動(dòng)nginx
cd /usr/local/nginx/sbin./nginx
預(yù)覽運(yùn)行效果
記得在服務(wù)器安全配置里開放8080端口
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目部署上線的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目部署上線內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue實(shí)現(xiàn)列表拖拽排序的功能，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-11-11
vue-router next(false) 禁止訪問某個(gè)頁(yè)面時(shí),不保留歷史訪問記錄問題
這篇文章主要介紹了vue-router next(false) 禁止訪問某個(gè)頁(yè)面時(shí),不保留歷史訪問記錄問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
本篇文章主要介紹了詳解webpack打包vue時(shí)提取css，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-05-05
這篇文章主要介紹了vue+iview使用樹形控件的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了 Vue.js對(duì)象轉(zhuǎn)換的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了Vue路由傳參的兩種方式query和params,介紹了query和params區(qū)別與總結(jié)，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
vue封裝實(shí)現(xiàn)自動(dòng)循環(huán)滾動(dòng)的列表
在做數(shù)據(jù)大屏開發(fā)的過程中,經(jīng)常出現(xiàn)需要對(duì)列表進(jìn)行自動(dòng)滾動(dòng)的需求,所以本文就來(lái)為大家介紹一下如何利用vue封裝一個(gè)自動(dòng)循環(huán)滾動(dòng)的列表吧2023-09-09
vue3新擬態(tài)組件庫(kù)開發(fā)流程之table組件源碼分析
這篇文章主要介紹了vue3新擬態(tài)組件庫(kù)開發(fā)流程——table組件源碼,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vuejs通過filterBy、orderBy實(shí)現(xiàn)搜索篩選、降序排序數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vuejs通過filterBy、orderBy實(shí)現(xiàn)搜索篩選、降序排序數(shù)據(jù)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要給大家介紹了vant樣式不生效問題的解決辦法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06