准备

一个云服务 1c1g 就行

多环境配置文件

nuxt3 支持 .env 文件配置多个环境，需要手动指定文件猛击查看官网。

设置环境变量

在 nuxt.config.ts 文件中设置

export default defineNuxtConfig({
  runtimeConfig: {
    // 只能在服务端使用
    apiSecret: '123',
    
    // public 下的变量可以在客户端和服务端使用
    public: {
      apiBase: ''
    }
  }
});

创建 env 文件

默认加载 .env 文件的配置

.env 文件内容

NUXT_PUBLIC_API_BASE=http://127.0.0.1:53105/mk

.env.production 文件内容

NUXT_PUBLIC_API_BASE=https://vaebe.top:53104/mk

也许你发现了 NUXT_PUBLIC_API_BASE 这个变量, 看下上边的 设置环境变量 就会发现其实就是把对象字段 key 进行拼接。

所以 API_BASE 对应的就是 runtimeConfig\public 配置里的 apiBase 这个字段，.env 文件的变量应该与 runtimeConfig 配置的内容相同。

如果不在 public 下那就应该是 NUXT_API_BASE=xxxxxxx

获取环境变量

猛击查看官网说明

export default async () => {
  // 使用 useRuntimeConfig 获取配置全局函数无需导入
  const config = useRuntimeConfig()

  // 获取定义的 apiBase 变量
  config.public.apiBase
}

打包

在 package.json 中写入如下内容

"scripts": {
    "generate": "nuxt generate",
    "generate:pro": "nuxt generate --dotenv .env.production",
}

generate 命令会与渲染每个路由并把结构存储在纯 HTML 中。

然后执行对应环境的命令进行打包会生成一个 dist 文件但其实指向的是 .output\public 目录，所以应该部署 .output\public 目录而不是 dist 目录。

生成后的文件大概是下图这样

prerender

prerender: {
  crawlLinks: true
}

部署

压缩 .output 后上传服务器的部署目录，假设压缩为 .zip 文件、部署目录是 opt\web。

执行 unzip .output.zip 解压缩（若没有 unzip 命令，执行 yum install zip unzip 安装）

配置 nginx

找到对应的配置目录作者的是 /usr/local/nginx/conf

打开 nginx.conf 文件在 http 内增加 server 配置内容如下

server {
    listen       80;
    server_name  localhost;

    location / {
        # nuxt generate 文件存放的目录
        root /opt/web/.output/public;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

配置https 访问

server {
    listen 80;
    #请填写绑定证书的域名
    server_name vaebe.top; 
    #把http的域名请求转成https
    return 301 https://$host$request_uri; 
}


server {
    listen 443 ssl; 
    #请填写绑定证书的域名
    server_name vaebe.top; 
    #请填写证书文件的相对路径或绝对路径
    ssl_certificate ./vaebe.top_nginx/vaebe.top_bundle.pem; 
    #请填写私钥文件的相对路径或绝对路径
    ssl_certificate_key ./vaebe.top_nginx/vaebe.top.key; 
    ssl_session_timeout 5m;
    #请按照以下协议配置
    ssl_protocols TLSv1.2 TLSv1.3; 
    #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
    ssl_prefer_server_ciphers on;

    location / {
        root /opt/web/.output/public;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

总结

文章主要介绍了 nuxt3 中多环境的打包及部署，在 nuxt3 中使用不同的 env 文件可以实现不同环境的打包。文章最后还介绍了使用Nginx 部署打包后的文件及配置 https 访问。

往期文章