vue2项目SEO优化指南
nuxt是一个基于node和vue的ssr框架，运行在node环境
公司要求vue2官网做seo优化，2025年nuxt的默认版本是4.x，不支持vue2。因此选择nuxt2版本
1. 创建项目
- Node版本：目前已知的支持nuxt2的node版本：v16.20.2，这也是我用的服务器最高支持的版本
- 新建一个目录 取名
nuxt-ssr，也可以根据自己需要取名 cd nuxt-ssr- 创建一个
package.json文件，内容如下：
json
{
"name": "my-app",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"generate": "nuxt generate",
"start": "nuxt start"
},
"dependencies": {
"nuxt": "^2.18.1"
},
}- 安装依赖
npm install - 在根目录新建一个
/pages目录，用于存放路由文件。
bash
mkdir pages
touch pages/index.vue不习惯命令行创建也可以手动新建文件夹 创建一个index.vue文件，内容如下：
html
<template>
<h1>Hello world!</h1>
</template>执行npm run dev启动项目 访问http://localhost:3000/，就可以看到你的Hello world页面了
2.路由配置
- 用脚手架创建的话，nuxt2项目会自动生成一个
/pages目录，用于存放路由文件。手动创建的话没有，就自己手动建一个。 - 路由示例：
markdown
-| pages/
---| index.vue
---| posts.vue
---| posts/
-----| _slug.vue
-----| index.vue这样的目录会被nuxt自动解析为：
javascript
Route Page
/ ~/pages/index.vue
/posts ~/pages/posts.vue (parent) + ~/pages/posts.vue (child route)
/posts/ ~/pages/posts.vue (parent) + ~/pages/posts.vue (child route)
/posts/foo ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)
/posts/foo/ ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)上面的解析说明是摘自nuxt官网的解释，其实简单一句话就是，浏览器访问/a/b，那么就会指向pages/a/b/index.vue这个文件解析后的页面。
- 路由基础路径，对应nginx的location。编辑
nuxt.config.js文件，并添加以下内容：
javascript
export default {
router: {
base: '/your-base-path/'
}
}3. 添加全局静样式。编辑nuxt.config.js文件，并添加以下内容：
javascript
export default {
// 添加全局 Less 文件（可选）
css: [
'~/assets/less/main.less', // 你的全局 Less 文件路径
],
}4. 使用element-ui。
- 安装element-ui。
bash
npm install element-ui --save- 引入element-ui。在plugin目录下新建一个element-ui.js文件，内容如下：
javascript
// plugins/element-ui.js
import Vue from 'vue';
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import { Backtop, Timeline, TimelineItem,Carousel,CarouselItem,Dialog,Pagination } from 'element-ui'; // 只引入需要的组件
Vue.component(Backtop.name, Backtop);
Vue.component(Timeline.name, Timeline);
Vue.component(TimelineItem.name, TimelineItem);
Vue.component(Carousel.name, Carousel);
Vue.component(CarouselItem.name, CarouselItem);
Vue.component(Dialog.name, Dialog);
Vue.component(Pagination.name, Pagination);
// 全局注册 Element UI
// Vue.use(ElementUI);其中被注释掉的是全局的注册方式，我的项目采用的是按需引入方式
- 编辑
nuxt.config.js文件，并添加以下内容：
javascript
export default {
// 添加全局 Less 文件（可选）
plugins: [
{ src: '~/plugins/element-ui', ssr: true },// SSR 模式
],
// 配置构建选项
build: {
...
babel: {
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
]
},
}
}- 使用element-ui。经过上述操作后就可以在vue文件中直接使用element-ui组件了
html
<el-backtop target=".el-main"></el-backtop>
<el-timeline>5. 数据请求。推荐使用@nuxtjs/axios库
关于请求可以参考nuxt2官网：v2.nuxt.com/docs/direct...
- 5.1 安装@nuxtjs/axios库。
bash
npm install @nuxtjs/axios --save- 5.2 创建plugins目录，并添加axios.js文件，内容如下：
javascript
// plugins/axios.js
export default function ({ $axios, redirect }) {
$axios.onError(error => {
if (error.response.status === 500) {
redirect('/sorry') //这里是接口请求失败后的页面
}
})
}- 5.3 编辑
nuxt.config.js文件，并添加以下内容：
javascript
// nuxt.config.js
export default {
...
modules: ['@nuxtjs/axios'],
plugins: ['~/plugins/axios.js']
}- 5.4 使用axios。 做完以上操作，你会发现在vue文件中可以通过
this.$axios访问axios对象了。
注意： 凡是需要服务端完成的请求都要放在官方提供的fetch勾子中，或者在asyncData中完成。 这里演示一下其中fetch勾子的用法：
vue
<template>
<h1>{{ post.title }}</h1>
</template>
<script>
let baseUrl = 'xxxx' //java或者其他后端服务地址
export default {
data() {
return {
post: {}
};
},
async fetch ({ $axios, params }) {
const response = await this.$axios.get(baseUrl + 'aaa/bbb?id=' +'需要的参数')
if(response.status === 200){
this.post = response.data.data //这里只是示例，实际根据返回结构获取
}
},
fetchKey: 'join-us', //每个页面唯一
fetchOnServer: true, //设置为true代表服务器端渲染
}
</script>这样使用后，数据就会在服务端完成请求从而返回给浏览器完整的html。
6.部署服务器（通过宝塔面板）
- 打开宝塔面板，左侧菜单选择网站，选择node项目，点击node版本管理器，安装需要的node版本，本项目的版本是v16.20.2
- 创建一个目录，将以下文件放入：
lua
package.json
nuxt.config.js
package-lock.json- 执行npm install --production，安装生产所需要的依赖
- 在本地环境执行npm run build，生成.nuxt目录
- 上传.nuxt目录到服务器
- 在宝塔面板中创建一个node项目，目录就选我们上传的目录，启动命令为npm start
- 也可以用pm2启动
- 访问http:// + 你的IP或域名 + 你的routebase路径，即可看到页面