NUXT使用SSR部署到服务器进行SEO优化

关于NUXT.js 使用如何使用SSR进行SEO优化

发布前配置

nuxt.config.js文件修改如下配置

mode:‘universal’
ssr:true
server: {
port: 8000,//此处端口,必须为未占用的端口否则会报错
host: ‘0.0.0.0’,
timing: false
},

配置完成后,执行npm run build 注意,要执行build而不是generate。

上传部署

bulid完成后,会生成.nuxt文件夹。
将.nuxt static nuxt.config.js package.json文件全部上传至服务器空间。
上传后在package.json文件对应目录,打开终端执行
npm install
npm run build
npm run start

若npm install失败,也可以直接把全部的前端文件上传至服务器(包括node_modules)(不是很推荐)

全部上传后,执行npm run build 和 npm run start
此时会有和前端一样的运行成功的按钮。

此时可关闭宝塔终端

使用pm2守护进程

测试可以进行npm run start之后,安装pm2进程管理器

npm install pm2 -g
pm2 start
ln -s /usr/local/node/node-v12.13.0-linux-x64/lib/node_modules/pm2/bin/pm2 /usr/local/bin/
注意,/usr/local/node/node-v12.13.0-linux-x64/lib/node_modules/pm2为node安装目录,请找准自己的安装目录进行替换。
pm2 startup
pm2 save (有些版本可省略save命令,他会自己执行save)

此时执行你的原域名:8000,即可查看到已进行seo优化的nuxt vue代码了

部署后更新

将更新后的文件上传后
执行npm run build
然后重启pm2守护进程
pm2 restart 你的项目名字

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nuxt.js 是一个基于 Vue.js 的通用应用框架,它可以让你更快速、更轻松地开发应用程序。Nuxt.js 3 是 Nuxt.js 的最新版本,它提供了全新的架构和 API,具有更好的性能和更好的扩展性。下面是关于 Nuxt.js 3 中的 SEO 优化配置的介绍。 Nuxt.js 3 中的 SEO 优化配置主要是通过 nuxt.config.js 文件来进行配置。下面是一些常用的 SEO 配置项: 1. head 标签配置:可以通过配置 head 对象来设置 head 标签中的元信息,如 title、meta、link 等。 2. router 配置:可以通过配置 router 对象来设置路由相关的信息,如路由的 base、mode 等。 3. generate 配置:可以通过配置 generate 对象来设置生成静态站点的相关信息,如生成路径、页面列表等。 4. sitemap 配置:可以通过配置 sitemap 对象来生成站点地图。 5. robots 配置:可以通过配置 robots 对象来生成 robots.txt 文件。 6. canonical 配置:可以通过配置 canonical 对象来设置页面的 canonical URL。 下面是一个简单的 nuxt.config.js 文件的 SEO 配置示例: ``` export default { head: { title: 'My website', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, router: { base: '/my-website/' }, generate: { dir: 'dist/my-website' }, sitemap: { hostname: 'https://www.my-website.com', gzip: true }, robots: { UserAgent: '*', Disallow: '/' }, canonical: { baseURL: 'https://www.my-website.com' } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值