使用前通读官方文档【目前的笔记只有在开发项目时才想起】【文末留微信，有问题可以讨论】整体开发体验-难度一般，很多问题可以看文档或者百度。方法——坑多，有的地方可能会遇到未知的问题。路由守卫使用nuxt的中间件功能。中间件允许在每个页面进入之前运行一个函数。可以在页面/全局使用//middleware/route.js//接收上下文作为第一个参数exportdefault({route,redirect,app,store})=>{if(!store.state.userInfo.userId){returnredirect('/login')}if(route.fullPath==='/mine'){returnredirect('/mine/account')}}//在nuxt.config.js中配置module.exports={router:{middleware:'route'}}自定义全局方法使用nuxt中的plugins函数。Nuxt在运行程序前先执行js插件（适用于自带库或第三方模块，修改插件时需要重启项目）。这里封装了localstorge操作//只允许在mounted///plugins/utils.jsimportVuefrom'vue'conststorage={install(Vue){/***@paramskeysetItemkey*@paramsvaluesetItemvalue*@paramsexpire过期时间默认7*/Vue.prototype.$setStorge=(key,value,expire=7)=>{letobj={value,time:Date.now(),expire:到期*60*60*24}localStorage&&localStorage.setItem(key,JSON.stringify(obj))}Vue.prototype.$getStorge=(key)=>{letval=localStorage.getItem(key)if(!val)返回nullval=JSON.parse(val)//expireif((Date.now()-val.time)>val.expire){localStorage.removeItem(key)returnnull}returnval.value}Vue.prototype.$delStorge=(key)=>{localStorage.removeItem(key)}}}Vue.use(storge)//plugins字段需要在nuxt.config.js中配置，参考middlewarenuxt使用vuexstore目录下新建的user.js直接暴露state等属性不使用模块化，直接创建index.js暴露exportconststate=()=>({userInfo:null})exportconstmutations={setUserInfo(state,data){state.userInfo=data}}exportdefault{state,//getters,//actions,mutations}服务端获取数据asyncData方法页面级组件中只会对服务端生效的hook，页面刷新时不执行返回对象，并将其放入客户端的数据数据中。每次请求服务器页面时都会执行nuxt到服务器的context对象，即：第一次进入页面或刷新页面时只存在于vuex中的action对象中exportconstactions={nuxtServerInit({commit},{req}){try{letcookies=req.headers['cookie']console.log(cookies)}catch(error){console.log(error)}}}nuxtdeploy服务器安装工具node、yarn、pm2curl--silent--locationhttps://rpm.nodesource.com/setup_10.x|sudobash-sudoyuminstall-ynodejssudoyuminstallyarnnpminstall-gpm2localnuxt项目代码执行npmrunbuild（.nuxt文件夹下会生成dist文件目录）拖拽五个文件夹.nuxt、static、nuxt.config.js,package.jsonserver到服务器npminstallnpmrunstartpm2startnpm--name"nameinthepackage.jsonfile"--runstart:::warning第一次部署成功（项目调用高德api报错):::第二次重新部署——高德引入的地方直接在.vue文件中，使用script标签导入，改成：exportdefault{head:{script:[{src:'....'}]}}-Unexpectedidentifier//Unexpectedidentifier(function(exports,require,module,__filename,__dirname){importModalfrom'./confirm'})//很多人这样说项目缺少babel识别导入方式//按参考下载没用::警告找不到解决办法，后来找到了iview的on-demandimport中错误的package.json是iviewversion3.15，也就是iview的on-demandimport中的包名使用'iview'会报错改成'view-design'解决问题:::"plugins":[["import",{"libraryName":"view-design","libraryDirectory":"src/components"}]]nginx部分配置位置/{proxy_passhttp://localhost:3000;}引入百度统计代码新建插件/baidu.jsexportdefault({app:{router},store})=>{/*每条路由变化时进行pv统计*/router.afterEach((to,from)=>{/*告诉添加一个PV*/try{window._hmt=window._hmt||[]window._hmt.push(['_trackPageview',to.fullPath])}catch(e){}})}configurenuxt.config.js中的脚本script:[{src:'https://hm.baidu.com/hm.js?****'}]在nuxt.config.js中配置plugins字段启用server字段在httpsnuxt.config.jsconstpath=require('path')constfs=require('fs')module.exports={server:{https:{//这里的路径可以直接写读取https证书文件//key:fs.readFileSync(path.resolve(__dirname,'**server.key'))key:fs.readFileSync('/usr/local/***.key')}}}wx:L_k01derenshengQQ技术交流群：130840304
