开发静态网站可以使用Nginx作为Web服务器，Vue作为网站内容开发框架，Vite作为工程管理工具。以下是快速使用介绍。

1 安装Nginx

1.1 Mac安装Nginx

安装Nginx

在Mac上使用brew安装Nginx，命令如下：

brew install nginx

安装完成后，默认网页文件目录是 /opt/homebrew/var/www，默认端口是8080(配置文件在/opt/homebrew/etc/nginx/nginx.conf)，装载文件目录是/opt/homebrew/etc/nginx/servers/。

启动Nginx

nginx

停止Nginx

nginx -s quit
or
nginx -s stop

1.2 Debian安装Nginx

在Debian上使用apt安装Nginx，步骤如下：

  1. 更新系统：在开始安装之前，建议先更新系统。命令如下：

    sudo apt update && sudo apt upgrade

  2. 安装Nginx：运行以下命令安装Nginx：

    sudo apt install nginx

  3. 启动Nginx：安装Nginx后，正常情况下它会自动启动；如果没有，可执行以下命令：

    sudo systemctl start nginx

  4. 检查Nginx状态：

    sudo systemctl status nginx

    一切正常的话，输出内容会包含“Active: active (running)”。

  5. 配置防火墙：允许Nginx对外提供访问，需要打开80和443接口：

    sudo ufw allow 'Nginx HTTP'
sudo ufw allow 'Nginx HTTPS'

  6. 检查Nginx：通过浏览器访问Nginx所在服务器IP地址：

2 Nginx常用命令

nginx -h

nginx version: nginx/1.27.4
Usage: nginx [-?hvVtTq] [-s signal] [-p prefix]
             [-e filename] [-c filename] [-g directives]

Options:
  -?,-h         : this help
  -v            : show version and exit
  -V            : show version and configure options then exit
  -t            : test configuration and exit
  -T            : test configuration, dump it and exit
  -q            : suppress non-error messages during configuration testing
  -s signal     : send signal to a master process: stop, quit, reopen, reload
  -p prefix     : set prefix path (default: /opt/homebrew/Cellar/nginx/1.27.4/)
  -e filename   : set error log file (default: /opt/homebrew/var/log/nginx/error.log)
  -c filename   : set configuration file (default: /opt/homebrew/etc/nginx/nginx.conf)
  -g directives : set global directives out of configuration file

3 使用Vite构建Vue工程

执行命令如下：

npm create vite@latest {my-vue-app} -- --template vue

启动该工程如下：

cd {my-vue-app}
npm install
npm run dev

一般启动输出内容如下：

  VITE v6.2.5  ready in 163 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

3.1 构建应用

执行如下命令，会在工程目录下新建dist文件夹。所有静态站点的文件会生成在dist中。

npm run build

4 部署Vite工程到Nginx

4.1 替换Nginx默认目录内文件

将dist文件夹内的文件，移动到/opt/homebrew/var/www内。(需要替换Nginx自带的index.html)

启动Nginx

nginx

如果Nginx已启动，可以reload

nginx -s reload

也可以修改Nginx默认目录地址。

4.2 修改Nginx默认目录

编辑Nginx配置文件/opt/homebrew/etc/nginx/nginx.conf。找到http - server - location - root配置项，修改为Vite构建的dist目录。如下：

            #root   html;
            root   {vite-project}/dist;

启动Nginx

nginx

如果Nginx已启动，可以reload

nginx -s reload

4.3 验证

访问http://127.0.0.1:8080，即可看到Vite构建的index.html

![Screenshot 2025-04-10 at 11.42.38](/Users/chengfeng/Desktop/Screenshot 2025-04-10 at 11.42.38.png)

4 增加Vuetify组件框架

在已有Vue项目中，执行如下命令来增加Vuetify组件框架：

npm i vuetify

然后修改Vue项目的main.js文件，导入vuetify。如下：

import { createApp } from 'vue'
import './style.css'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

// Components
import App from './App.vue'

const vuetify = createVuetify({
    components,
    directives,
})

createApp(App).use(vuetify).mount('#app')

就可以开始使用vuetify组件啦。