Linux下如何部署Nuxt项目(二)

Linux下如何部署Nuxt项目(一)_小鸟哗啦啦的博客-CSDN博客，书接上回，以实际场景开始。

请认真看完这篇文章，还不会部署Nuxt，我直接拿弹弓打你们家玻璃！

一、nuxt的配置检查

服务端渲染的应用，应该是先编译构建，然后再去启动nuxt服务。如果你不build，而是直接运行 npm run dev 这种，没有经过webpack压缩，请求资源会相当的饿耗时。也就是上一篇文章中说的根本不是部署！！！

1.package.json中描述：

nuxt：启动热更新的web服务器，当然指的是开发模式

nuxt build： webpack进行打包

nuxt start：这才是生产部署的指令，当然也是启动一个web服务器

javascript 复制代码

{
  "name": "my-nuxt-web",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "web": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxt/http": "^0.6.4",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "compression-webpack-plugin": "6.1.1",
    "core-js": "^3.15.1",
    "element-ui": "^2.15.13",
    "nuxt": "^2.15.7"
  },
  "devDependencies": {
    "@nuxtjs/style-resources": "^1.2.1",
    "less": "^4.1.2",
    "less-loader": "^7.3.0"
  }
}

2.nuxt.config.js

也是非常重要的配置文件，这里只说重要的几个属性：

javascript 复制代码

// 生产环境 必须是 service
target: "service", 

// server 的配置
server: {
  port: "3001",
  host: "0.0.0.0" // 必须是 0.0.0.0
},

target：开发环境为 static，生产打包时必须是 service，否则你运行 npm run start 就会报错：

复制代码

Error: Output directory `dist\` does not exist, please use `nuxt generate` before `nuxt start` for static target.

不要怀疑是路径问题，就是target配置错了。官网的配置介绍：Nuxt 2 - Commands and Deployment

server: host的配置必须为本机，否则你会发现部署后访问不到资源。

二、nuxt的本地打包检查

你可能会觉得有点多余，但本地先操作会使一些问题变得好定位，比如说本地没有问题，部署发现访问不到，就可以定位到问题是服务器的端口未开放或者防火墙未关闭。

直接运行 npm run build --- 没有错误
直接运行 npm run start ---没有错误

恭喜，完成部署前的一切检查！

三、nuxt的线上发布

两种方式：

1.本地工程全量上传至服务器，甚至可以本地打包，node_modules也上传，直接跳转到第3步

2.选择必要的文件，上传至服务器比如说 Nuxt 文件夹

javascript 复制代码

.nuxt // 文件夹 (build之后，内部会有个dist目录)
static // 静态不编译的文件夹
package.json // 配置文件
nuxt.config.js // 配置文件

终端进入Nuxt文件夹中：这里推荐yarn，npm坑了我一把

javascript 复制代码

yarn install

然后打包

复制代码

npm run build

3.启动服务 name就是package.json中的name

javascript 复制代码

pm2 start npm --name "my-nuxt-web" -- run start

查看进程 pm2 list，行了，自己玩去吧

4.确保服务器重启时能自动拉起你的服务 pm2 save