vue的两种服务器端渲染方案( 四 ) _vue

（7）编写组件，在src/components文件夹下写两个组件，在app.vue中引用一下，用上刚写的模拟数据
Hello.vue
这里是测试页面一
{{item}}
链接到测试页面二

Hello1.vue
这里是测试页面二{{item}}
（8）配置路由并在app.vue使用路由
router.js
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export function createRouter () {return new Router({mode: 'history',routes: [path: '/hello',component: () => import('./components/Hello.vue')},path: '/hello1',component: () => import('./components/Hello1.vue')},
app.vue
（9）根目录下创建一个.babelrc，进行配置"presets": ["@babel/preset-env","modules": false（10）改写package.json执行命令"dev": "nodemon server.js","build": "rimraf dist && npm run build:client && npm run build:server","build:client": "webpack --config config/webpack.client.config.js","build:server": "webpack --config config/webpack.server.config.js"
大搞告成，执行一下dev命令，可以通过访问localhost:8080端口看到页面，记得带上路由哦～
执行build命令可看到，最后dist文件下共有三个文件：main.[chunk-hash].js，vue-ssr-client-manifest.json，vue-ssr-server-bundle.json
附上文件整体目录结构

文章插图

方案二：基于vue的nuxt.js通用应用框架
git 示例demo地址
一对比，这个就显得丝滑多了～官网地址： nuxt.js
先对比一下两种方案的差别

1.vue初始化虽然有cli，但是nuxt.js的cli更加完备2.nuxt有更合理的工程化目录，vue过于简洁，比如一些component，api文件夹都是要手动创建的3.路由配置：传统应用需要自己来配置，nuxt.js自动生成4.没有统一配置，需手动创建 。nuxt.js会生成nuxt.config.js5.传统不易与管理底层框架逻辑（nuxt支持中间件管理，虽然我还没探索过这里）

显而易见这个上手就快多了，也不需要安装一大堆依赖，如果用了sass需要安装sass和sass-loader，反正我是用了
（1）创建一个项目可选npm，npx，yarn，具体看官方文档npm init nuxt-app（2）pages下面创建几个文件
nuxt是通过pages页面形成动态的路由，不用手动配置路由。比如在pages下面新增了个文件about.vue，那么这个页面对应的路由就是/about
其实这个时候运行npm run dev 就可以看到简单的页面了
（3）模拟接口
这里介绍一个插件，可以快速创建一个服务
npm i json-server
安装完后，在根目录新增db.json文件，模拟几个接口

"post": [{"id": 1, "title": "json-server", "author": "jx"}],"comments": [{"id": 1, "body": "some comment", "postId": 1}],"profile": {"name": "typicode"}

运行命令json-server --watch db.json --port=8000(不加会端口冲突)，就可以看到

文章插图

因为是get请求，可以直接点击访问可以看到mock的数据已经返回了

文章插图

（4）页面调用
先配置一下axIOS，推荐使用nuxt.js封装的axios："@nuxtjs/axios": "^5.13.6"，然后再在nuxt.config.js文件中modules下面配置一下就可以使用了
modules: [ '@nuxtjs/axios'],
随便找个接口调用一下

这里是测试页面一
接口返回数据：{{posts}}

刷新下页面就可以看到效果了，这里注意$axios有两个get方法，一个$axios.get还会返回头部等信息，另一个$axios.$get只返回结果
总结：
从页面篇幅上应该也能看到哪个容易上手了，nuxt相对于插件来说限定了文件夹的结构，并通过此预定了一些功能，更好上手。预设了利用vue.js开发服务端渲染所需要的各种配置，并且提供了提供了静态站点，异步数据加载，中间件支持，布局支持等

【vue的两种服务器端渲染方案】