最近在做一个官网,要求国际化。首先想到的是使用 nuxt vue 来开发。nuxt 文档说明很清楚,支持国际化、支持服务端渲染、支持自定义页面关键词、描述等有利于SEO 的配置。目前项目开发已经进行到一半。关键的和需要注意的地方和代码在这里记录一下,毕竟是第一次使用nuxt,希望以后在使用时看到自己的进步。
- api 分离。虽然这个网站比较简单,每个页面都有一两个接口,完全可以不使用api分离,但是个人还是用来,可能有某种强迫症趋势着我,也许成熟后才能会学克制。分离主要代码:/api/index.js
1 const modulesFiles = require.context("./apilist", true, /.js$/); 2 const modules = modulesFiles.keys().reduce((modules, modulePath) => { 3 const moduleName = modulePath.replace(/^./(.*).w+$/, "$1"); 4 5 const value = modulesFiles(modulePath); 6 7 modules[moduleName] = value.default || value; 8 9 return modules; 10 }, {}); 11 12 export default modules;
在 /api/apilis/ 文件夹下建立 页面对应的 js 文件,例如:新建首页(index.)对应的api 文件 index.js :
export default axios => ({ /** * 首页数据 */ index(){ return axios.get(`/api/home`) }, /** * 首页 - 环保数据 */ getReduceNumber() { return axios.get('/api/home_number') } })
就这样就ok啦!调用api时,也要注意哦:
-
如何调用api?例如在首页index.vue 中调用,当你在 asyncData 中需要调用时: app.$api.index.index() 如果在方法中调用: this.$api.index.getReduceNumber()
- 为什么会有 $api ? 当然这里需要注入到 vue 实例中,name在nuxt中如何注入呢?话不多说,直接上代码:
1 import apis from '~/api/index' 2 // 这里ctx也可以访问到store 3 export default (ctx, inject) => { 4 // 注入上下文 5 // 挂载到vue实例上面 (组件中使用:this.$api) 6 const locale = ctx.params.lang || ctx.store.state.locale || ctx.app.i18n.fallbackLocale 7 ctx.$axios.setBaseURL(`your_domain/${locale}`) 8 // console.log(process.server,ctx.$axios.defaults.baseURL) 9 var apiObject = {}; 10 for (var i in apis) { 11 apiObject[i] = apis[i](ctx.$axios); 12 } 13 14 //inject:注入到服务端context, vue实例, vuex中 15 inject("api", apiObject); 16 }