nuxt+cube-ui主题色修改

博主刚接触Nuxt,对nuxt.config.js配置不清楚,且Cube - UI主题色需后编译解决。克隆项目本地报错,需将Nuxt从dependencies移到devDependencies;创建Nuxt项目选Koa后按官方配置报错,不配置server framework选none则正常。最终在Nuxt里可修改Cube - UI主题色。

前言

因为刚接触nuxt, 对于nuxt.config.js 里面的配置不是很清楚该怎么弄,而且cube-ui的主题色需要后编译去解决。所以还是提了Issues

官方示例

点击查看

问题

1.克隆项目本地后报错 上面的issues也有体现。

解决方案:用 NUXT 脚手架初始化的的项目,nuxt 被放在了 dependencies 下,需要手动移动到 devDependencies 下,否则 windows 下有坑。

2.创建nuxt项目,在选择 custom server framework 的时候 选择了 Koa 。然后再按照官方示例的配置去配置还是遇到了报错。

解决方案: 不要配置 server framework 直接选择none的情况是好的。当然我也提了示例仓库的Issues,我也搜了相关报错的博客,说是因为语法的问题。为了推进自己的项目还是选择重新不配置koa,移动了代码。

总结

当时第二个问题挺纠结的,因为我看官方的示例是好的。自己的项目也是一样的配置,但是一直有问题。一直没解决。对比出来发现多了Koa的配置。因为当初也是想选择koa留着之后用。没想到…

不过最终还是在nuxt 可以修改cube-ui的主题色,也是蛮ok的。

是的,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、付费专栏及课程。

余额充值