Vue服务器端渲染nuxt.js初探

需要在 assets/目录下创建 main.css 添加全局样式。

.page-enter-active, .page-leave-active {  
transition: opacity .5s;  
}  
.page-enter, .page-leave-active {  
opacity: 0;  
}  

然后添加到 nuxt.config.js 文件中：

module.exports = {  
css: [  
'assets/main.css'  
],  
loading: { color: '#2152F3' },  
}  

更多过渡效果： https://zh.nuxtjs.org/guide/routing#过渡动效

头部信息 (Meta 标签 ，全局样式)

nuxt.config.js 里定义应用所需的所有默认 meta 标签

head: {  
meta: [  
{ charset: 'utf-8' },  
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }  
{ hid: 'description', name: 'description', content: '' }  
],  
link: [ // 这里可以引用全局的样式，但是会默认走根目录  
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }  
{ rel: 'stylesheet', href: '～/static/common.js' } // 文件一般都放在static目录下  
]  
}  

具体参考：https://zh.nuxtjs.org/api/configuration-head

异步数据 (asyncData方法，限于page页面组件，components中不适用)

这里包括 asyncData钩子 / fetch 钩子 / 。。。

【fetch】 用于在渲染页面前填充应用的状态树(store)数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据

【asyncData】 主要用于请求ajax 填充data中的数据

每次加载之前被调用。它可以在服务端或路由更新之前被调用。

asyncData ({ params }) {  
return axios.get(`https://my-api/posts/${params.id}`) 
.then((res) => {  
// 赋值给页面 data中的数据  
return { title: res.data.title }  
})  
}  

或者变换为同步请求：

async asyncData() {  
let formData = {}  
let ajaxData = await axios({  
method: "post",  
url: url,  
data: qs.stringify(formData),  
retryDelay : 1000,  
withCredentials : true,  
responseType : 'json',  
timeout : 60000,  
'Content-Type' : 'application/x-www-form-urlencoded'  
})  
}  

注意添加 catch

注意：

这个异步请求函数， 第一次执行环境为node环境中，也就是服务器端，后续刷新页面则执行环境为client 客户端

本地开发时，如果在客户端直接请求完整路径时会经常遇到跨域问题，所以需要在 asyncData 中区分环境变量

process.env.VUE_ENV 区分 是server 还是 client

然后根据不同的环境配置不同的 url ， 并且在 client时， 需要做服务器端代理请求，需要给url增加一层代理标识

例如：client环境中

url = '/api' + '/get-user-info';  
nuxt.config.js 中  
/*  
** 处理代理跨域问题  
*/  
axios: {  
proxy: true,  
prefix: '/api', // 增加请求标识  
credentials: true,  
},  
proxy: {  
'/api': {  
// 代理地址  
target: (process.env.NODE_ENV == 'production') ?'http://test.' : 'http://www.' ,  
changeOrigin: true,  
pathRewrite: {  
'^/api': '' // 将标识 替换为 ‘’  
},  
},  
}  

错误处理 :

context中提供了一个 error(params) 方法，你可以通过调用该方法来显示错误信息页面。

（编辑：泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!