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

params.statusCode 可用于指定服务端返回的请求状态码。

asyncData ({ params, error }) {  
return axios.get(`https://my-api/posts/${params.id}`)  
.then((res) => {  
return { title: res.data.title }  
})  
.catch((e) => {  
error({ statusCode: 404, message: 'Post not found' })  
})  
}  

第三方插件的使用

例如：element-ui

需要在 plugins/ 中 添加 element-ui.js

import Vue from 'vue'  
import Element from 'element-ui/lib/element-ui.common'  
import locale from 'element-ui/lib/locale/lang/en'  
export default () => {  
Vue.use(Element, { locale })  
}  

在 uuxt.config.js 中

plugins: [  
"~/plugins/element-ui",  
// {src : '~/plugins/ga.js' , ssr : false} 是否做ssr处理， false时为在客户端才加载  
],  

这样全局就可以使用了

注意：

在使用第三方插件时需要注意 插件内部很多地方都会用到window对象，在服务端会报错，所以需要将ssr设置为false

在生产环境中， 有一些插件，在多个页面中引用，这样会造成多次加载打包的现象

所以： 在 build配置项中增加配置

build: {  
vendor:['axios', 'qs'], // 防止多次打包  
}  

page 函数钩子生命周期 以及window 对象

经常会在 第三方组件或者调用的时候 遇到window对象报错问题。

asyncData() {  
console.log(window) // 服务端报错  
console.log(this) // undefined  
},  
fetch() {  
console.log(window) // 服务端报错  
},  
created () {  
console.log(window) // undefined  
},  
mounted () {  
console.log(window) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}  
}  

css js 文件打包文件夹处理

在 uuxt.config.js 中，只需配置生产环境中。

build: {  
extractCSS: { allChunks: true }, // css 独立打包 link 的形式加载  
publicPath: '/sample/assets/', //sample/essays 打包的默认路径为 ‘_nuxt’ 或者可以指定cdn 域名  
filenames:{ // css 和 js img 打包时指定文件夹  
app: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',  
chunk: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',  
css: ({ isDev }) => isDev ? '[name].js' : '[contenthash].css',  
img: ({ isDev }) => isDev ? '[path][name].[ext]' : '[hash:7].[ext]'  
}  
},  

输出 css link 路径： /sample/essays/[contenthash].css

注意： 静态资源文件路径名 不能和页面路由名称相同 publicPath 默认配置 '/' 无效

部署

先 npm run build 打包 client文件和 server 文件。

然后 npm runb start 启动服务器。

pm2 管理：

pm2 start npm --name "my-nuxt" -- run start 

部署时 需要注意 如果是 从其他地方重定向 到 nuxt 环境中的页面是， 需要额外配置一个 css / js 重定向路由，并且需要注意 header头部信息，防止出现 css 文件返回头部信息为 Content-Type text/plain。

目前项目中只运用到这么多，后续项目迁移时遇到更多的问题会做补充，如果大家遇到过其他的坑点可以在下面评论中总结出来以及解决方案。

（编辑：泰州站长网）

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