快捷導(dǎo)航

Vue項目部署上線全過程記錄(保姆級教程)

更新時間：2023年03月01日 14:28:40 作者：天才守門員

vue項目開發(fā)完畢后,我們需要將項目打包上線,同時我們希望可以在本地預(yù)覽生產(chǎn)環(huán)境項目,下面這篇文章主要給大家介紹了關(guān)于Vue項目部署上線的相關(guān)資料,需要的朋友可以參考下

上線前準(zhǔn)備

1.先在vue.config.js文件中配置反向代理解決跨域請求問題

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      "/api": {
        target: "后端url地址",
        //允許跨域請求
        changeOrigin: true
      }
    }
  }
})

2.在vue項目根目錄運行 npm run build

打包完成后會在根目錄生成dist文件夾，這個dist文件夾需要上傳到服務(wù)器

3.鏈接云服務(wù)器，在 /usr/local/ 下創(chuàng)建 web文件夾用來存放dist文件夾

//此時已經(jīng)連接到云服務(wù)器
cd /usr/local/
mkdir web

通過可視化工具上傳dist文件夾，上傳后如下圖所示

4.安裝gcc

檢查gcc是否已經(jīng)安裝

gcc -v

如未安裝執(zhí)行安裝命令

//centos
yum -y install gcc
//上一步輸出版本號的話可以跳過本步驟

以下步驟不可跳過

安裝 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（重點）

在 /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è)置

啟動nginx

cd /usr/local/nginx/sbin./nginx

預(yù)覽運行效果

記得在服務(wù)器安全配置里開放8080端口

總結(jié)

到此這篇關(guān)于Vue項目部署上線的文章就介紹到這了,更多相關(guān)Vue項目部署上線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解vue中l(wèi)ocalStorage的使用方法
這篇文章主要介紹了詳解vue中l(wèi)ocalStorage的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
vue2.0在沒有dev-server.js下的本地數(shù)據(jù)配置方法
這篇文章主要介紹了vue2.0在沒有dev-server.js下的本地數(shù)據(jù)配置方法的相關(guān)資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2018-02-02
vue中錨點的三種方法
本文給大家?guī)砹藇ue中錨點的三種方法，本文通過實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧
2018-07-07
手把手教你搭建vue3.0項目架構(gòu)
這篇文章手把手教你搭建vue3.0項目架構(gòu)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2021-11-11
vite的搭建與使用的詳細(xì)步驟
本文主要介紹了vite的搭建與使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
vue項目中main.js使用方法詳解
main.js是我們的入口文件,主要作用是初始化vue實例,并引入所需要的插件,下面這篇文章主要給大家介紹了關(guān)于vue項目中main.js使用方法的相關(guān)資料,需要的朋友可以參考下
2022-07-07
web前端Vue報錯:Uncaught?(in?promise)?TypeError:Cannot?read?
這篇文章主要給大家介紹了關(guān)于web前端Vue報錯:Uncaught?(in?promise)?TypeError:Cannot?read?properties?of?nu的解決方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
vue前端更新后需要清空緩存代碼示例
這篇文章主要給大家介紹了關(guān)于vue前端更新后需要清空緩存的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下
2024-10-10
關(guān)于vue二進(jìn)制轉(zhuǎn)圖片顯示問題后端返回的是byte[]數(shù)組
這篇文章主要介紹了關(guān)于vue二進(jìn)制轉(zhuǎn)圖片顯示問題后端返回的是byte[]數(shù)組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
淺談vue 錨點指令v-anchor的使用
今天小編就為大家分享一篇淺談vue 錨點指令v-anchor的使用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11