Nuxt3中使用axios

nuxt.js开发个人简历并部署到服务器

2020年初在武汉的家里。因为疫情封城在家学习nuxt.js和项目部署的知识，特地分享一下nuxt.js采坑经历，大家一起学习。如果熟悉vue相关开发，来制作这个项目应该是比较容易上手的。

浏览地址可点击这 在线简历

初始化项目

npx create-nuxt-app resume

创建出如下目录

• assets 可以放一些资源文件，比如css,img 之类
• locales 是我自己创建的用来存放国际化文件使用
• meddleware 中间件，这里解析动态路由值看来使用何种语言
• pages 存放各个页面
• plugins 插件目录，本项目使用了 ant-design , antv-g2, i18n 插件
• server 存放后端文件
• static 存放静态资源
• store vuex文件
• nuxt.config.js nuxt 配置文件

知道这些目录结构的作用后，在对应的地方写入代码就好了。nuxt会根据page目录下的文件结构自己生成对应的路由

项目介绍

自己在写word简历时找各种模板，发现下载模板还要费用，word也不能很好的体现出前端的特性，就想着做一个，本项目是想做一个在线简历的页面。

我设想需求时，在一个页面中通过路由来展示中文和英文的切换。主要分几个大的子路由home,about,expresence等来介绍自己的各项信息。所以这样一分页面结构也就出来了在page目录下

使用_lang 是采用的nuxt动态路由方式。index.vue为主入口，其下为各个子路由。项目国际化设置

项目好不容易写完了，但是毕竟是简历，怎么能就我们自己来欣赏呢，当然要放服务器上大家都可以访问的那种。马上就想到了github page 来部署静态页面。nuxt来生成静态文件。配置 generate 属性。

运行以下命令

npm run generate

生成如下目录

直接点击html页面发现无法直接运行。只能以服务的方式打开页面才没有报错，但是 github page 显然没有提供这样的方式。所以只能换个办法。有条件的花钱租个云服务器当然没什么问题了。。。哈哈但是自己穷啊。去找了个免费的云服务器。使用的 小鸟云 网站申请的一个免费版的 连接在这 就看运气申请了

最后做出的效果为

![在这里插入图片描述](