首页 技术 正文
技术 2022年11月23日
0 收藏 459 点赞 3,848 浏览 1710 个字

  vue项目与nuxt.js实在有着太多的不同,例如项目结构变化很大,router.js没了,vuex store写法有变化,router钩子没了等等。老项目毕竟也有一些体量,这么折腾我可接受不了,不过经过一番调查,我发现这些问题不是不可以解决。因此虽然迁移是要迁移的,但是要尽量保持vue-cli 3项目的风味,以最小的改动完成迁移。为此我做了很多调查,本文的目的就在于此。

1、重建项目

  没啥可说的,直接掏出命令行开始吧,npx create-nuxt-app my-project,这是官网get started文档的操作。

  我们的原则是尽量和vue cli3项目一致。选项基本上选默认,除了eslint打开。值得注意的是有个axios module,这就是个this.$axios插件,我个人目前认为没啥用,也不影响一般的axios使用方式。

2、eslint配置、及三方依赖插件安装

  把.eslintrc.js对照着修改一下,完了别忘记安装包:npm install –save-dev @vue/eslint-config-standard

  把依赖复制,安装即可

3、重要的来了。值得注意的是nuxt默认的srcDir就是根路径,所以我们只需要直接把之前项目的src里面的内容拷贝过来,放至根目录,把原先的静态文件拷贝过来放置static目录。

4、最重要的是:使用代码router,而不是nuxt自动生成的导航配置

  nuxt.js一个很大不同是router.js没了,按官方的说法是使用目录自动动态生成router.js。我觉得其实还可以,但没有必要那么精巧。老项目迁移,写都写了,直接拿过来就是。好在可以改,nuxt.js官方提供了一个插件:nuxt-community/router-module

  将其加入项目:npm install --save @nuxtjs/router

  然后修改配置文件:modules里面加入

modules: [
'@nuxtjs/router'
],

  之前项目的router.js需要写在 根目录 / 下,需要略微改变写法,导出为createRouter函数

// 只需要加上这样即可
export function createRouter () {
const router = new Router({
mode: 'history',
routes
})
return router
}

  还有一个重要的是,需要移除所有异步加载

  有可能你像我一样碰到了这样的报错,然后一脸懵逼:render function or template not defined in component: anonymous

vue-cli3整体迁移至服务端渲染nuxtjs

  我排查了半天,发现是router.js中异步加载的锅(当然前提是router.js按照上文移植过来了),所以直接改成引入即可

import guest from '@/views/carnival/guest'
import partner from '@/views/carnival/partner'

5、Router全局钩子

  有两种办法,第一种是写nuxt plugin直接拿router对象

export default ({ app }) => {
app.router.beforeEach(async function (to, from, next) {
}
}

  然后在nuxt.config.js配置里加上

    plugins: [
'@/plugins/route'
],

  但这种办法如果在beforeEach里面做请求拿数据,就会引起DOM渲染不同步的警告(nuxt.js v2.3.4)。只要发出请求,不做任何其他事情,就会出错(其实这是非常不科学的)。顺便提一句,这里通过app.store可以拿到store

  第二种办法,也是nuxt.js官方推荐的办法,是写middleware:

  我在middleware下写一个router-guards.js

export default async function ({ store, route, redirect, req }) {
console.log('hello')
// let ret = await axios.get(`...`)
}

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141204.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:876 阅读:5,464
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,688
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,503
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:731 阅读:4,468
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:5,379
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,263
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站