最近从零到一开发了一个门户网站。因为对seo的要求，所以选择了nuxt.js来搭配typescript。期间遇到了很多问题，最后都一一解决了。留下一个demo供大家参考，如果对大家有帮助，请给个star，谢谢！下面的demo地址是我总结的一部分（后面会补充）：1、axios推荐直接使用nuxtjs的axios模块。1.安装并导入@nuxtjs/axios需要代理，请安装并导入@nuxtjs/proxynuxt.config.js:exportdefault{modules:['@nuxtjs/axios','@nuxtjs/proxy'],axios:{proxy:true,baseURL:'',prefix:'/api-prefix',credential:true},proxy:{'/api-prefix':{target:'http://...',changeOrigin:true,pathRewrite:{'^/api-prefix':'',changeOrigin:true}}},...}2.在plugins目录下拦截axios，新增axios-accessor.ts文件：plugins/axios-accessor.tsIn:import{Plugin}from'@nuxt/types'import{AxiosResponse,AxiosRequestConfig,AxiosError}from'axios'constaccessor:Plugin=({error})=>{$axios.onRequest((config:AxiosRequestConfig)=>{//...returnconfig})$axios.onError((e:AxiosError)=>{//...})//响应拦截器，数据返回后，可以执行一个简单的判断$axios.interceptors.response.use((response:AxiosResponse<any>)=>{constres=responseif(res.status===200){returnPromise.resolve(res)}else{returnPromise.reject(res)}},(e:any)=>{const{status,data}=e.responseerror({statusCode:status,message:data})returnPromise.reject(e)})}exportdefaultaccessor然后应用新的插件/axios-accessor.tsnuxt.config。在js中添加如下配置：exportdefault{...plugins:['@/plugins/axios-accessor']}3.在非vue文件中使用$axios对象。nuxtjs中的axios模块会在vue实例上挂载一个$axios对象供使用。在实际开发过程中，我们经常习惯把项目中的api方法放在一个单独的模块中，供全局使用。如何在非vue文件中使用$axios对象？在nuxtjs官网提供的typescript文档中，在vuexstore初始化示例中，提到入口：https://typescript.nuxtjs.org...utils/api.ts:import{NuxtAxiosInstance}from'@nuxtjs/axios'let$axios:NuxtAxiosInstanceexportfunctioninitializeAxios(axiosInstance:NuxtAxiosInstance){$axios=axiosInstance}export{$axios}plugin/axios-accessor.ts:import{Plugin}from'@nuxt/types'import{AxiosResponse,AxiosRequestConfig、AxiosError}from'axios'//新介绍import{initializeAxios}from'~/utils/api'constaccessor:Plugin=({error,app:{$axios}})=>{//这里调用initializeAxios($axios)$axios.onRequest((config:AxiosRequestConfig)=>{//...返回配置})$axios.onError((e:AxiosError)=>{//...})//响应拦截器，数据返回后，这里可以先做一个简单的判断$axios.interceptors.response.use((response:AxiosResponse)=>{constres=responseif(res.status===200){返回Promise.resolve(res)}else{returnPromise.reject(res)}},(e:any)=>{const{status,data}=e.responseerror({statusCode:status,message:data})返回Promise.reject(e)})}大功告成。在其他文件中，只要import{$axios}from'@/utils/api'就可以直接使用了！2.store在nuxtjs官方文档中有说明，Nuxt.js支持两种store的使用方式，你可以选择一种使用：模块模式：store目录下的每个.js文件都会被转换成一个指定名称的子模块在statetree中（当然index是根模块）Classic(deprecated):store/index.js返回创建Vuex.Store实例的方法结合ts，当然是使用vuex-module-decorators来创建模块。在store/myModule.ts中：import{Module,VuexModule,Mutation}from'vuex-module-decorators'@Module({name:'myModule',stateFactory:true,namespaced:true,})exportdefaultclassMyModuleextendsVuexModule{wheels=2@MutationincrWheels(extra){this.wheels+=extra}getaxles(){returnthis.wheels/2}}在utils/store-accessor.ts中：import{Store}from'vuex'import{getModule}from'vuex-module-decorators'importMyModulefrom'~/store/myModule'letmyModule:MyModulefunctioninitializeStores(store:Store):void{myModule=getModule(MyModule,store)}export{initializeStores,myModule}在store/index.ts中：import{Store}from'vuex'import{initializeStores}from'~/utils/store-accessor'constinitializer=(store:Store)=>initializeStores(store)exportconstplugins=[initializer]export*from'~/utils/store-accessor'然后就可以愉快的使用啦！3、Cookie关于cookie，之前一直在使用js-cookie库。在这个nuxtjs项目中，在mode:'universal'模式下，服务服务端渲染的时候，没有办法拿到客户端缓存的cookie。导致页面刷新后无法立即通过cookie获取用户缓存的登录状态。所以后面会用到cookie-universal-nuxt这个库。api和js-cookie基本一样。它可以在服务器端使用。导入后，一个新的$cookie对象将被添加到vue实例中。为了方便全局使用，可以遵循$axios的accessor逻辑，如下例所示：1.首先安装导入npminstallcookie-universal-nuxt--savenuxt.config.js:exportdefault{module:['@nuxtjs/axios','@nuxtjs/proxy','cookie-universal-nuxt'],...}2.cookieaccessorutils/api.ts:import{NuxtAxiosInstance}from'@nuxtjs/axios'import{NuxtCookies}from'cookie-universal-nuxt'(cookiesInstance:NuxtCookies){$cookies=cookiesInstance}export{$axios,$cookies}plugin/axios-accessor.ts:import{Plugin}from'@nuxt/types'import{AxiosResponse,AxiosRequestConfig,AxiosError}from'axios'//添加import{initializeAxios,initializeCookies}from'~/utils/api'constaccessor:Plugin=({error,app:{$axios,$cookies}})=>{//调用initializeAxios($axios)initializeCookies($cookies)$axios.onRequest((config:AxiosRequestConfig)=>{//...returnconfig})$axios.onError((e:AxiosError)=>{//...})//响应拦截器，数据返回后，可以先make这里简单判断$axios.interceptors.response.use((response:AxiosResponse)=>{constres=responseif(res.status===200){returnPromise.resolve(res)}else{returnPromise.reject(res)}},(e:any)=>{const{status,data}=e.responseerror({statusCode:status,message:data})returnPromise.reject(e)})}中其他文件，只需从'@/utils/api'导入{$cookies}即可直接使用！OK，先写这么多，有问题欢迎指出交流，再附上demo地址。
