理解部署 Nuxt 应用

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

要在生产环境部署 Nuxt 应用,首先需要编译生成适用于生产环境的 Nuxt 应用。打开 package.json ,在这个文件里有一个自定义的命令,就是这个 build,实际执行的是 nuxt build,这个命令的作用就是编译生成适用于生产环境的应用。

想要生成静态应用,可以执行这个 generate 命令。我们先试一下这个命令,执行 npm run generate。

完成以后,观察一下项目里的 .output 目录里的 public 这个目录。这个目录里的 public 里面的东西,就是我们要部署到服务器上的应用。里面就是一静态资源,比如 html 还有 js 文件,所以部署它的时候,只需要一个普通的静态的 web 服务器就行了,不需要 Node.js 环境。

在终端,可以用一下 serve 这个命令快速创建一个 web 服务器,执行 serve ./.output/public。

在浏览器,刷新一下页面,现在浏览器上显示的就是生成的静态应用。

回到终端,先停止运行服务,然后执行一下 npm run build,执行编译。完成以后观察一下项目里的 .output 这个目录,现在这里的 public 里面的东西是一些公开的静态资源,server 目录里的东西是编译生成的应用。

我们可以直接用 node 命令,执行一下 .output/server/index.mjs 。

刷新一下页面,现在这里显示的就是编译生成的适合在生产环境上运行的应用,你会发现这个内容列表跟之前有些区别,这是因为运行应用的时候并没有加载 .env 这个环境变量文件。

可以在执行 node 命令之前,设置一下需要的环境变量。复制一下 .env 里的这个环境变量还有对应的值。然后把它放在 node 命令的前面,再执行一下。

然后刷新一下页面,现在应用使用的服务端应用接口的地址就会是 http://localhost:3001 了。

想要改变应用的端口,可以使用 NITRO_PORT 这个环境变量,这里设置一下 NITRO_PORT 这个环境变量,值是 3003 ,执行一下。

在浏览器,刷新一下页面,提示打不开页面,因为现在应用的端口变成了 3003,改一下地址,这样就可以打开应用页面了。

理解部署 Nuxt 应用《 Nuxt.js:应用部署 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点