部署 Vite 项目到服务器

1. 配置环境变量文件

        在 Vite 项目中，为了适应不同的环境需求，需要根据开发和生产环境动态设置 config.js 中的 baseURL。在开发环境中，通常将 baseURL 设置为 http://localhost，这样方便连接本地的后端服务。但是，如果在生产环境中仍然使用 localhost，其他电脑在访问服务器时会把 localhost 解析为它们自己的本地地址，而不是指向后端服务。为了解决这个问题，需要将 baseURL 修改为后端服务的 IP 地址，这样无论是服务器本机还是局域网内的其他设备，都能通过正确的 IP 地址访问后端服务。

步骤

①.创建 .env.development 和 .env.production 文件，分别为开发环境和生产环境配置不同的 VITE_BASE_URL。

• .env.development：

VITE_BASE_URL=http://localhost:5240（后端服务定义的访问端口）

• .env.production：

VITE_BASE_URL=http://<服务器_IP>:5240

②.在 vite.config.js 中，使用 loadEnv 加载环境变量，并根据当前环境动态设置 baseURL。

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'

export default defineConfig(({ mode, command }) => {
// 使用 loadEnv 方法加载环境变量，mode 是当前环境模式，process.cwd() 是当前工作目录
const env = loadEnv(mode, process.cwd())
return {
// 部署生产环境和开发环境下的URL。
// 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
base: '/',
plugins: createVitePlugins(env, command === 'build'),
resolve: {
alias: {
'~': path.resolve(__dirname, './'),
'@': path.resolve(__dirname, './src')
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
server: {
port: 8420
},
// 根据不同的环境,传递不同的.env文件里的值
define: {
'process.env': env
}
}
})

2. 设定 server.host 支持外部访问

        Vite 默认绑定到 localhost，这意味着只有本地设备可以访问。在生产环境或部署到服务器后，需要将 server.host 设置为 0.0.0.0，以允许来自外部设备的连接。

        在 vite.config.js 中，配置 server.host 为 0.0.0.0，确保服务器监听所有网络接口。这样，其他设备可以通过服务器的 IP 地址进行访问。

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'

export default defineConfig(({ mode, command }) => {
const env = loadEnv(mode, process.cwd())

return {
base: '/',
plugins: createVitePlugins(env, command === 'build'),
resolve: {
alias: {
'~': path.resolve(__dirname, './'),
'@': path.resolve(__dirname, './src')
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
server: {
host: '0.0.0.0', // 允许外部访问
port: 8080 // 指定访问端口号
},
define: {
'process.env': env
}
}
})

        同时，需检查服务器的防火墙配置，确保所使用的端口（如 8080）允许外部访问。例如，使用以下命令打开指定端口：

sudo ufw allow 8080/tcp

3. 在 package.json 中设定环境

        在 package.json 中，可以根据开发环境和生产环境定义不同的脚本命令，以便使用不同的配置和命令运行项目。常见的命令包括 dev、build 和 preview，其中 preview 命令可用于预览生产环境的构建结果。

{
"scripts": {
"dev": "vite", // 启动开发服务器
"build": "vite build", // 构建生产环境代码
"preview": "vite preview –port 8420" // 预览生产环境代码
}
}

开发环境

        启动开发服务器，运行本地开发环境。此命令会读取 vite.config.js 中的开发配置，并通过 localhost 和指定的端口（如 8080）启动服务器。开发人员可以通过这个服务器实时预览和调试代码，进行快速的迭代开发。

npm run dev

或者：

vite

生产环境

        打包构建生产环境代码。此命令会将项目编译、优化，并生成静态文件，通常位于 dist 目录下。这些文件是用于生产环境部署的，经过优化后体积更小、性能更佳。

npm run build

或者：

vite build

        预览构建后的生产环境代码。此命令启动一个本地服务器，用于模拟生产环境的运行，默认使用端口 4173。需要注意，server.port 的配置仅适用于开发服务器（即 npm run dev），不会影响 npm run preview 的端口。可以通过在运行 npm run preview 时添加 –port 参数来指定端口号。

npm run preview — –port 8080

或者:

vite preview — –port 8080

        或者在 package.json 中，使用“preview": "vite preview –port 8080”，确保 npm run preview 使用指定的端口 8080

{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview –port 8080" // 使用指定端口
}
}

4. Nginx 配置

        在生产环境中，通常需要使用 Nginx 作为 Web 服务器来提供静态资源服务。Vite 构建后的文件通常会部署到 /var/www/html 目录下。为了确保正确访问这些文件，需配置 Nginx 并将请求路由到正确的位置。

        以下是一个简单的 Nginx 配置示例：

server {
listen 80;
server_name your_domain_or_ip;

location / {
root /var/www/html;
index index.html;
try_files $uri $uri/ /index.html;
}
}

        此配置将确保所有访问请求都路由到 index.html，并通过 Nginx 提供静态文件服务。