Nuxt项目搭建并使用及一些注意项
虽然也算是有vue的经验,不过nuxt确实是第一次玩,很多东西都是摸索的,也遇到了坑,项目最后还算能跑起来,这里写上我从搭建到开发,及最后部署的过程吧
-
执行命令:
npx create-nuxt-app nuxttest
(nuxttest是项目名,可自己命名),然后等待数据加载,然后会有一些选项,根据提示进行相应的选择,以下为个人选项Project name
nuxttest
Project descriptionMy brilliant Nuxt.js project
Author nameqiudaniu
Choose the package managerNpm
Choose UI frameworkiView
Choose custom server frameworkKoa
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 frameworkJest
Choose rendering modeSingle 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
-
一些介绍及教程可以看nuxt官网 ,从初始化项目到对应的模块使用上都有介绍,如果项目玩的还算可以,基本上所有官网上介绍的目录文件夹都会用上;
其实这里或者在第一步之前都可以执行这个命令安装nuxt执行全局环境
npm i nuxt@2.8.1 -g
,这里我固定了版本 ;执行比较慢,耐心等待; -
在目录结构中,有一个文件
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 } }
-
在写代码的时候注意server下,服务端代码用
require
和module.exports
来引入和导出(如果使用了babel-cli
配置下也可以用import
和export default
,不过后边部署应该会有些问题,注意下,开发模式运行没问题) -
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
就是上方代码块文件命名) -
我的权限在
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
中 -
如果你想登录或者调用数据进行操作,不要在自己的server中写接口,开发模式是没有任何问题的,但是只要是部署,就挂了,在response中监测到的数据永远是页面的html代码;当然有解决的请务必告诉我,非常感谢;
-
调试可以执行
nuxt
,注意要停止调试时必须要执行Ctrl+C
,不要强制关闭,下次调试就会报一个错,有端口号占用,无法启动,执行下方命令先找到对应端口号程序,然后找到tcp号,关闭 1. netstat -ano|findstr 8082 2. taskkill /f /t /im 19644
-
打包部署可执行
nuxt build
,然后复制.nuxt,static,package.json,package-lock.json,nuxt.config.js
,执行npm i
,最后执行nuxt start
运行;使用pm2保持执行状态需要另外配置;