一、環(huán)境?????????

這里因為我們有的小伙伴可能不太需要服務(wù)器，單純學(xué)習(xí)的話也沒有必要去買一個服務(wù)器。如果需要把自己的東西部署到公網(wǎng)上，有很多方式，自行百度。你也可以購買阿里云或者騰訊云。邏輯都是一樣的，我這里使用的虛擬機+centos系統(tǒng)，我已經(jīng)提前在自己的機器安裝好了。感興趣的小伙伴可以看我Node.js專欄。里面有從虛擬機、centos到一些開發(fā)工具的詳細(xì)安裝步驟。特別是我們這篇文章中要用到的nginx服務(wù)器。

二、nginx?????????

Nginx (engine x) 是一個高性能的HTTP和反向代理web服務(wù)器，同時也提供了IMAP/POP3/SMTP服務(wù)。? 是一款輕量級的Web 服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器，在BSD-like 協(xié)議下發(fā)行。其特點是占有內(nèi)存少，并發(fā)能力強，事實上nginx的并發(fā)能力在同類型的網(wǎng)頁服務(wù)器中表現(xiàn)較好。

三、為什么使用nginx代理?????????

我們在開發(fā)環(huán)境通常經(jīng)過配置以后就能正常與后端進(jìn)行交互，那是因為我們使用的工具提供了proxy做代理從而解決了開發(fā)環(huán)境的跨域請求問題。項目上線以后需要我們重新做處理，這時候nginx就該出場了。

1、前后端分離?? ?? ??

Vue項目一般是前端項目，需要與后端項目進(jìn)行數(shù)據(jù)交互，而后端項目一般是通過API接口提供數(shù)據(jù)服務(wù)，需要通過nginx代理將API請求轉(zhuǎn)發(fā)到后端項目。

2、跨域問題?? ?? ??

由于瀏覽器的同源策略，Vue項目無法直接訪問第三方接口或其他域名下的資源，需要通過nginx代理進(jìn)行跨域訪問。

3、靜態(tài)資源緩存?? ?? ??

nginx可以對靜態(tài)資源進(jìn)行緩存，減少服務(wù)器壓力和提高網(wǎng)站性能。Vue項目中的靜態(tài)資源包括js、css、圖片等文件，通過nginx代理可以實現(xiàn)緩存功能。

4、負(fù)載均衡?? ?? ??

如果Vue項目需要部署在多臺服務(wù)器上，可以通過nginx實現(xiàn)負(fù)載均衡，將請求分發(fā)給不同的服務(wù)器，提高系統(tǒng)的可用性和穩(wěn)定性。

四、項目打包?????????

我這里的話已經(jīng)搭建好項目，并且做了動態(tài)路由、國際化等等。需要的話小伙伴可以看 ?? ?????
Vue3全家桶

1、項目配置，修改vite.config.ts??????????

自己看代碼注釋哈，配置有一項proxy，它呢只會和我們開發(fā)有關(guān)系，發(fā)到nginx以后是一點都用不到它的。

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vueJsx from '@vitejs/plugin-vue-jsx';
const pathSrc = path.resolve(__dirname, 'src')
import tsStart from './src/plugin/vitePlugin/ts-start'
import tsBuild from './src/plugin/vitePlugin/ts-build'

export default ({ mode }: ImportMetaEnv) => defineConfig({
  base: './', // 在開發(fā)或生產(chǎn)中使用的基本公共路徑。
  resolve: {
    alias: {
      '@': pathSrc, // 文件系統(tǒng)路徑別名
    }
  },
  plugins: [
    AutoImport({
      imports: ['vue'],
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'Icon'
        })
      ],
      dts: path.resolve(pathSrc + '\\\autoImport', 'auto-imports.d.ts')
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          enabledCollections: ['ep', 'carbon', 'noto']
        })
      ],
      dts: path.resolve(pathSrc + '\\\autoImport', 'components.d.ts')
    }),
    Icons({
      autoInstall: true,
      compiler: 'vue3'
    }),
    vue(),
    vueJsx(), // 支持jsx、tsx的寫法
    tsStart(),
    tsBuild(),
  ],
  server: {
    host: '0.0.0.0', // 指定服務(wù)器應(yīng)該監(jiān)聽哪個 IP 地址
    port: 9527, // 指定開發(fā)服務(wù)器端口
    strictPort: true, // 若端口已被占用則會直接退出
    open: false, // 啟動時自動在瀏覽器中打開應(yīng)用程序
    proxy: {
      '/api': {
        target: loadEnv(mode, process.cwd()).VITE_APP_SERVER_URL, // 后端服務(wù)實際地址
        changeOrigin: true, //開啟代理
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    outDir: 'ts-super-web', // 生成輸出的根目錄。如果該目錄存在，則會在生成之前將其刪除。 默認(rèn)文件夾名稱為dist
    target: 'esnext',
    terserOptions: {
      compress: {
        drop_console: true, // 生產(chǎn)環(huán)境去掉控制臺 console
        drop_debugger: true, // 生產(chǎn)環(huán)境去掉控制臺 debugger 默認(rèn)就是true
        dead_code: true, // 刪除無法訪問的代碼 默認(rèn)就是true
      }
    },
    chunkSizeWarningLimit: 2000, // 調(diào)整區(qū)塊大小警告限制
  }
})

2、項目根木下執(zhí)行打包命令??????????

yarn build

這樣我們就已經(jīng)打包完成了，在項目根目錄下會產(chǎn)生一個ts-super-web的文件夾，也就是我們在vite.config.ts中配置的outDir?？刂婆_輸出的菩薩圖像是我單獨做了一個插件，感興趣的小伙伴可以看我的另一篇文章。?? ???Vite4自定義插件之終端打印自定義logo(圖案)

五、部署項目?????????

1、傳輸打包文件到服務(wù)器??????????

這里我們可以使用Xftp或者Xshell把文件傳輸?shù)椒?wù)器上，建議使用Xftp，因為不用壓縮文件直接傳輸?shù)街付ㄎ募A。我在服務(wù)器home下建立了一個web文件夾。通過Xftp直接右鍵就可以建立。

?2、配置nginx??????????

直接在服務(wù)器終端或者Xshell工具執(zhí)行下面的命令編輯nginx配置文件

vim /usr/local/nginx/conf/nginx.conf

進(jìn)入文件以后按 i?鍵，編輯完成以后按ESC鍵輸入:wq按回車即可。

配置文件中項目的配置是非常簡單的，因為我們這里沒有涉及到接口。所以root只要指向我們打包文件路徑的上一級目錄即可。

退出以后接著執(zhí)行命令重啟nginx

/usr/local/nginx/sbin/nginx -s reload

# 查看虛擬機的ip
ifconfig

到這里配置就完成了，我們?yōu)g覽器直接輸入服務(wù)器IP:8080/ts-super-web

發(fā)布到線上，之前做的動態(tài)路由、狀態(tài)管理、國際化等都是沒有任何問題的。

六、nginx配置接口反向代理

我演示的接口使用的是http://www.7timer.info/全球天氣預(yù)測系統(tǒng)的接口，如果要用的小伙伴記得合理利用。其次這里只是一個demo，所以沒有過多的配置其他復(fù)雜項，如果有需要的話可以聯(lián)系我。

1、我二次封裝的axios插件中，代理是根據(jù)環(huán)境獲取的。所以打包應(yīng)該對應(yīng)的文件是.env.production

2、項目根目錄下修改.env.production

VITE_NODE_ENV=production
VITE_APP_BASE_API=/api
VITE_APP_PREVENT_DUPLICATE_SUBMISSIONS=2000

根據(jù)上面的配置，我們需要在nginx中配置的代理就是/api，然后代理到http://www.7timer.info/。根據(jù)上面我們配置nginx的方法修改nginx.conf文件。對應(yīng)的nginx如下圖

location /api {
    proxy_pass http://www.7timer.info/;
}

3、效果

我是Etc.End。如果文章對你有所幫助，能否幫我點個免費的贊和收藏??。

?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??文章來源地址http://www.zghlxwxcb.cn/news/detail-445892.html

到了這里，關(guān)于Vite4 + Vue3 項目打包并發(fā)布Nginx服務(wù)器 (前端必看)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！