Nuxt项目搭建并使用及一些注意项

虽然也算是有vue的经验，不过nuxt确实是第一次玩，很多东西都是摸索的，也遇到了坑，项目最后还算能跑起来，这里写上我从搭建到开发，及最后部署的过程吧

1. 执行命令:npx create-nuxt-app nuxttest（nuxttest是项目名，可自己命名），然后等待数据加载，然后会有一些选项，根据提示进行相应的选择，以下为个人选项

   Project name nuxttest
   Project description My brilliant Nuxt.js project
   Author name qiudaniu
   Choose the package manager Npm
   Choose UI framework iView
   Choose custom server framework Koa
   Choose Nuxt.js modules (Press to select, to toggle all, to invert selection)
   Choose linting tools (Press to select,to toggle all, to invert selection)
   Choose test framework Jest
   Choose rendering mode Single Page App

   所有选择完后会进行初始化项目，初始完毕后会有一段提示，你需要怎么执行开发环境，执行部署，执行测试，

   🎉 Successfully created project nuxttest

   To get started:

       cd nuxttest
       npm run dev
   

   To build & start for production:

       cd nuxttest
       npm run build
       npm run start
   

   To test:

       cd nuxttest
       npm run test
   

2. 一些介绍及教程可以看nuxt官网 ，从初始化项目到对应的模块使用上都有介绍，如果项目玩的还算可以，基本上所有官网上介绍的目录文件夹都会用上；

   其实这里或者在第一步之前都可以执行这个命令安装nuxt执行全局环境 npm i nuxt@2.8.1 -g，这里我固定了版本 ；执行比较慢，耐心等待；

3. 在目录结构中，有一个文件nuxt.config.js同vue-cli创建的vue.config.js有些功能差不多，这里说下跨域，以下代码可以加入到nuxt.config.js中，如果接口前有api字段标识，其他的自己改改，一般都会用上这个代理配置；

     axios: {
       proxy: true,
       prefix: '/api/',
       credentials: false
     },
     proxy: {
       '/api': {
         target: process.env.VUE_APP_BASE_API, // 这里自己配置接口地址 
         changeOrigin: true
       }
     }
   

4. 在写代码的时候注意server下，服务端代码用require和module.exports来引入和导出（如果使用了babel-cli配置下也可以用import 和export default，不过后边部署应该会有些问题，注意下，开发模式运行没问题）

5. middleware这个中间件我觉得挺好玩的，在之前的项目vue-cli搭建时没有试过，可以进行页面权限过滤及登录过滤，这里贴上我用到的过滤方式

   import storagekeys from '@/utils/configs/storagekeys';
   import Cookies from 'js-cookie';
   const notVertificationList = ['login', 'index', 'tenantmanage-channel-list'];
   const authMenuVerification = routeName => {
     window.onresize = null;
     let userInfo = localStorage.getItem(storagekeys.local.vuexStore);
     if (!userInfo) {
       return false;
     }
     userInfo = JSON.parse(userInfo);
     if (!userInfo.userinfo || !userInfo.userinfo.userInfo || !userInfo.userinfo.userInfo.menus || userInfo.userinfo.userInfo.menus.length === 0) {
       return false;
     }
     let menuList = userInfo.userinfo.userInfo.menus;
   
     let num = routeName.split('-').length;
     if (num === 1) {
       return false;
     }
     if (num === 2) {
       let menuName1 = routeName.split('-')[0];
       let menu1 = menuList.find(i => i.code === menuName1);
       if (!menu1) {
         return false;
       }
       if (!menu1.childrens || menu1.childrens.length === 0) {
         return false;
       }
       let menu2 = menu1.childrens.find(j => j.code === routeName);
       if (!menu2) {
         return false;
       }
       return true;
     }
   }
   export default function ({
     route,
     req,
     res,
     redirect
   }) {
     let usertoken = Cookies.get(storagekeys.cookies.usertoken);
     // 这里添加权限过滤
     if (route.name === 'login' && usertoken) {
       redirect('/')
     } else if (route.name !== 'login' && !usertoken) {
       redirect('/login');
     } else if (notVertificationList.indexOf(route.name) === -1 && usertoken && !authMenuVerification(route.name)) {
       redirect('/error/404');
     }
   }
   
   

   以上代码简单说下，window.onresize = null;这行，我在页面中vue生命周期下destroyed执行去除监听失效了，也为了方面每个页面调这个太麻烦了就在中间件里边执行了，至于后边我的权限在localStorage中取到的的原因，我会在后边讲一下vuex使用时遇到的问题；

   然后是页面权限问题，这块规则按照自己的页面路由来判断的，其他的都很简单了;

   在页面上如果要使用这个权限，必须在页面中加上middleware: 'userAuth'（userAuth就是上方代码块文件命名）

6. 我的权限在localStorage中取到的，因为在Vuex中我用到了vuex-persistedstate这个插件，使用localstorage保持vuex中的数据(如果用户拿链接在浏览器另一个窗口中打开，或者刷新了页面，单单用vuex是不行的，记住页面的生命周期)

   贴上store下index.js

   import Vue from 'vue';
   import Vuex from 'vuex';
   import storagekeys from '@/utils/configs/storagekeys';
   
   // 用户登录信息--(包括导航权限)
   import userInfo from './userinfo';
   
   // vuex存储的key
   const vuexStoreKey = 'vuexStore';
   
   Vue.use(Vuex);
   const store = () => new Vuex.Store({
     plugins: [createPersistedState({
       key: storagekeys.local.vuexStore,
       paths: ['userinfo']
     })],
     modules: {
       userinfo: userInfo
     }
   });
   export default store
   

   使用vuex-persistedstate配合vuex可能会遇到另外情况，希望你不会遇到，两个页面基本同时刷新获取数据，如果有数据是放在vuex中（也就是vuex内容使用vuex-persistedstate存储在localstorage中），那么有可能会丢失其中一条，方法是在vuex中调用保存前先取出来所有，然后再全部保存，在这之前可以测试下；

   paths: ['userinfo']这块作用是userinfo这块数据会存储到localstorage中

7. 如果你想登录或者调用数据进行操作，不要在自己的server中写接口，开发模式是没有任何问题的，但是只要是部署，就挂了，在response中监测到的数据永远是页面的html代码；当然有解决的请务必告诉我，非常感谢；

8. 调试可以执行nuxt，注意要停止调试时必须要执行Ctrl+C，不要强制关闭，下次调试就会报一个错，有端口号占用，无法启动，执行下方命令

   先找到对应端口号程序，然后找到tcp号，关闭
   1. netstat -ano|findstr 8082
   2. taskkill /f /t /im 19644
   

9. 打包部署可执行nuxt build,然后复制.nuxt,static,package.json,package-lock.json,nuxt.config.js，执行npm i,最后执行nuxt start运行；使用pm2保持执行状态需要另外配置；