开头还有一些废话：年关将至，祝大家早年。希望大家在年会上抽奖，来年好运连连。废话不多说，直接进入正文项目环境：前端vue项目，需要对新增的几个路由页面做SEO处理。调查了插件prerender-spa-plugin，发现无法满足vuex和plugins的要求时，果断选择了nuxt.js做服务端渲染。以下是项目中组织的文件和问题。Nuxt.js是一个基于Vue.js的通用应用程序框架。预设了使用Vue.js开发服务端渲染（SSR，ServerSideRender）应用所需的各种配置，还可以一键生成静态站点。值得一提的是，nuxt是基于node.js的。如果后端是其他语言，你考虑加一层node.js的合理性吗？链接地址：https://zh.nuxtjs.org/guide/installation使用npx脚手架创建项目链接地址：https://zh.nuxtjs.org/guide/installation会提供以下选项1.选择集成服务器-sideframeworks:Express/Koa...2.选择你喜欢的UI框架：Bootstrap/ElementUI...3.选择你想要的Nuxt模式（UniversalorSPA）Normaltype/SinglePageApplication4.轻松添加axios模块向您的应用程序发送HTTP请求。5.将EsLint添加到代码规范并在保存时检查代码错误。6.添加Prettier以在保存时格式化/美化您的代码。注意：1.如果项目自带分支等git信息，需要删除npx生成目录下隐藏的git文件，因为npx生成文件时，默认是master分支，性质类似gitmodule子分支。2、第三点，选择Universal时，默认会输出静态页面，即可以seo。选择spa时，不能修改seo。可以修改nuxt.config.js中的配置项mode:'Universal'来定义类型。启动项目命令：npmrundev这个时候默认命令会报错，说没有指定ip，需要配置项：nuxt.config.js中的server:{//port:'3000',//定义输出端口，默认为3000host:'0.0.0.0'//定义输出ip}，注意：nuxt.config.js中的配置项会在server目录下的index.js中读取，如果不存在，将分配默认值const{host=process.env.HOST||'127.0.0.1',port=process.env.PORT||3000//默认配置情况下，修改这里仍然无效，端口3000}=nuxt.options.server页面需要注意的地方是：css默认加载在页面上；处理方式有两种1.在nuxt.config.js文件的header中配置链接和外部链接的常用样式（下面有详细说明）2.在nuxt.config.js的构建配置中自定义文件路径文件和Hash值（下面有详细介绍）项目目录结构1.资源目录（assets）用来组织未编译的staticLESS、SASS或JavaScript2等动态资源。组件目录（components）用于组织应用程序的Vue.js组件。Nuxt.js不会对该目录下的Vue.js组件进行扩充和增强，即这些组件不会像页面组件那样具有asyncData方法的特性。3.布局目录（layouts）这个目录是为Nuxt.js保留的，不能更改。用于组织应用程序的布局组件。4.中间件目录（middleware）目录用于存放应用程序的中间件。文件名的名称将成为中间件的名称（middleware/auth.js将成为auth中间件）。一个中间件接收上下文作为第一个参数：具体参考：https://zh.nuxtjs.org/guide/routing#Middleware5.页面目录（page）该目录为Nuxt.js保留，不可更改。用于组织应用程序的路由和视图。Nuxt.js框架会读取该目录下的所有.vue文件，自动生成对应的路由配置。Nuxt会根据文件夹名称和目录结构动态生成router，不需要额外配置。6、静态文件目录（static）用于存放应用程序的静态文件。Nuxt.js不会调用此类文件来构建和编译它们。服务器启动时，该目录下的文件会映射到应用根路径/。一般用于放置公共的css和js文件，但是如果不想让这些css和js到根目录下，需要将这些css放在assets中，然后在nuxt.config.js中配置build选项.下面会详细解释7.Store该目录用于组织应用的Vuex状态树文件注意：在普通的spa项目中可以抛出一个实例对象，store是exportdefaultnewVuex.Store({actions,getters,})这里需要抛出一个实例函数对象conststore=()=>{returnnewVuex.Store({state,getters,mutations,actions})}exportdefaultstore8.nuxt.config.js用于组织Nuxt.js应用的个性化配置，覆盖默认配置9.package.json省略...别名~或@//src目录~~或@@//根目录默认，src目录和根目录下相同页面之间的跳转要使用页面间路由，推荐使用标签。在js中，跳转时仍然可以使用$router.push等方法路由页面间的过渡效果。Nuxt.js使用的默认过渡效果名称是page。您需要在assets/目录中创建main.css并添加全局style.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#Transition动画头部信息（元标签，全局样式）在nuxt.config.js中定义了应用头部所需的所有默认元标签：{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方法，仅限于页面组件，不适用于组件）这包括asyncDatahook/fetchhook/。.[fetch]用于在渲染页面之前填充应用程序的状态树（store）数据，类似于asyncData方法，不同的是不会设置组件的数据[asyncData]主要用于请求ajax填充每次加载的数据中的数据之前都被调用过。它可以在服务器或路由更新之前调用。asyncData({params}){returnaxios.get(`https://my-api/posts/${params.id}`).then((res)=>{//赋值给页面中的数据datareturn{title:res.data.title}})}或者转化为同步请求asyncasyncData(){letformData={}letajaxData=awaitaxios({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环境，也就是server端，后面刷新页面时执行环境是client。客户端在本地开发时，如果客户端直接请求全路径，往往会遇到跨域的问题，所以需要在asyncData中，区分环境变量process.env.VUE_ENV来区分server和client，然后根据不同的环境配置不同的url，而在client中，需要做server端的代理请求，需要在url上加一层代理标识。例如：客户端环境下url='/api'+'/get-user-info';nuxt.conf文件在ig.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)方法，可以调用该方法显示错误信息页面的params.statusCode可以用来指定请求返回的服务器状态码。asyncData({params,error}){returnaxios.get(`https://my-api/posts/${params.id}`).then((res)=>{return{title:res.data.title}}).catch((e)=>{error({statusCode:404,message:'Postnotfound'})})}第三方插件的使用例如：element-ui需要添加element-在plugins/ui.js中importVuefrom'vue'importElementfrom'element-ui/lib/element-ui.common'importlocalefrom'element-ui/lib/locale/lang/en'exportdefault()=>{视。use(Element,{locale})}pluginsinnuxt.config.js:["~/plugins/element-ui",//{src:'~/plugins/ga.js',ssr:false}是否做ssr处理，为false时会在客户端加载]，这样可以全局使用注意：使用第三方插件时需要注意很多地方使用的window对象插件内部，在服务端会报错，所以需要设置ssr为false生产环境中，有一些插件在多个页面被引用，会造成多次加载打包所以：在构建配置项中添加配置构建：{vendor:['axios','qs'],//防止多重打包}页面函数钩子生命周期和窗口对象经常遇到第三方组件或调用报错错误到窗口对象asyncData(){console.log(window)//服务器报错console.log(this)//undefined},fetch(){console.log(window)//服务器报错},created(){console.log(window)//undefined},mounted(){console.log(window)//窗口{postMessage:?,blur:?,focus:?,close:?,frames:Window,…}}cssjs文件打包文件夹在uuxt.config.js中处理，配置生产环境即可:'/sample/assets/',//sample/essays打包的默认路径是'_nuxt'也可以指定cdn域名filenames:{//打包css和js时指定文件夹imgapp:({isDev})=>isDev？'[name].js':'[chunkhash].js',chunk:({isDev})=>isDev?'[名称].js':'[块ash].js',css:({isDev})=>isDev？'[name].js':'[contenthash].css',img:({isDev})=>isDev?'[path][name].[ext]':'[hash:7].[ext]'}}，输出css链接路径：/sample/essays/[contenthash].css注意：静态资源文件路径名不能与页面路由名称相同publicPath默认配置'/'无效。部署先npmrunbuild打包客户端文件和服务端文件，然后npmrunbstart启动服务端pm2并管理pm2startnpm--name"my-nuxt"--runstart部署时需要注意如果从其他地方重启到nuxt环境的页面，需要额外配置css/js重定向路由，需要注意header信息，防止css文件返回header信息为Content-键入文本/纯文本。目前只在项目中使用了很多，后续项目迁移过程中遇到更多问题会补充。如果你遇到过其他陷阱，可以在下方评论总结，解决方案文章较长。谢谢你的脸！谢谢大家！
