使用 nuxt+iview-admin+koa2 开发项目

公司最近在做的一个项目,依然是采用熟悉的vue开发,数据平台因为其数据量大的特点,采用传统的spa模式,首页加载时间很长,而SSR这种方式对于首屏的加载时间优化显而易见,同时还可以方便的进行SEO。因此借机学习Nuxt.js框架(文档详细,更新快,issue反馈及时)及iview(比较优秀的一款UI,基本满足项目需求)。

项目部分截图

截图一: 账号和密码随意填写

图片描述

截图二:

图片描述

截图三:

图片描述

刷新浏览器,重新从服务器端获取页面,看到是已经渲染过的html

图片描述

项目地址

git clone https://github.com/moedong/nuxt-iview.git

安装

npm install

开发

npm run dev

// GO to http://127.0.0.1:3000

测试环境

// 需要pm2,如果没有安装的先安装  npm install -g pm2
npm run publish:test

生产环境

// 需要pm2,如果没有安装的先安装  npm install -g pm2
npm run publish:prod

参考资料

nuxt.js
iview
iview-admin
koa-template

是的,nuxt + vue-i18n 在多语言切换时会改变路由,这是它的核心机制所决定的。nuxt + vue-i18n 通过在路由路径中添加语言前缀来实现多语言切换的,例如: ``` // 中文版路由 /zh/home // 英文版路由 /en/home ``` 这样做的好处是可以让搜索引擎更好地识别不同语言的页面,从而提高网站的 SEO。 如果您不想在路由中添加语言前缀,也可以通过配置 nuxt.config.js 文件来实现。具体实现方法如下: 1. 设置 routeNameSplitter 在 nuxt.config.js 文件中,设置 routeNameSplitter 选项,例如: ``` export default { ... router: { ... routeNameSplitter: '/' }, ... } ``` 这样做的效果是让 nuxt 不在路由中添加语言前缀,而是使用 / 分隔符来分隔路由和语言信息。 2. 使用别名来设置带有语言信息的页面路径 在 pages 文件夹中,为每个页面创建一个带有语言信息的别名,例如: ``` // pages/home.vue <template> <div> <h1>{{ $t('home.title') }}</h1> </div> </template> <script> export default { ... } // 为中文版路由创建别名 export const cn = { path: '/home', alias: '/zh/home' } // 为英文版路由创建别名 export const en = { path: '/home', alias: '/en/home' } </script> ``` 这样做的效果是让 nuxt 在生成路由时,使用带有语言信息的别名来代替默认的路由路径。 以上是我为您提供的关于 nuxt + vue-i18n 改变了路由的解决方法。如果您有其他问题,可以随时向我提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值