nuxt开发到一半,项目突然说要静态部署问题

183 阅读1分钟

Nuxt.js 是什么?

这里就不细说了,前往官网看看

最近遇到用vue开发,产品经理想要实现服务端渲染ssr,想了想去学习nuxt.js实现服务端渲染,结果做项目也快接近尾声,结果来一句静态部署吧,当初骂街:@#¥*&的想法,你当初怎么不早说!?那也只能默默憋回嘴里,谁叫我们是苦命的打工人。

Snipaste_2023-01-13_14-45-18.png

Nuxt.js也提供了官方静态部署方法

generate

该配置项用于定义每个动态路由的参数,Nuxt.js 依据这些路由配置生成对应目录结构的静态文件。 详细

使用指令

npm run generate

会创建一个 dist 文件夹,所有静态化后的资源文件均在其中。

根据上面的步骤,没有出现报错,那恭喜你成功运行!

如果你跟我一样出现白屏,运行出错,那咱们真是天涯沦落人,可以试试看我的解决方法如下:

mode 属性

nuxt.config.js中的mode更改为spa

  • 'spa': 没有服务器端渲染(只有客户端路由导航等)
  • 'universal': 同构应用程序(服务器端呈现+客户端路由导航等)

可以nuxt.config.js加一个 ssr: false

但资源路径会参数错误,这时候就需要修改一下nuxt.config.js里的router

router: {
    base: process.env.NODE_ENV === 'production' ? '/' : '/_nuxt/',
  },

能让/_nuxt/的js文件被成功加载!

执行一下

npm run generate

并把dist 文件夹部署到服务器上,应该是能成功运行!

后续还有问题的话,在进行补充~