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保持执行状态须要另外配置；