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。

今朝项目中只运用到这么多，后续项目迁徙时碰着更多的题目会做增补，假如各人碰着过其他的坑点可以在下面评述中总结出来以及办理方案。

（编辑：湖南网）

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