1. 搭建nuxt项目：参考https://blog.csdn.net/qq_42231156/article/details/90174203。
2. nuxt中使用全局@nuxtjs/axios：参考：https://blog.csdn.net/weixin_30794491/article/details/99910973。
2.1 如果pageage.json中的dependencies没有"@nuxtjs/axios"就下载安装：npm install --save @nuxtjs/axios
2.2 在nuxt.config.js中配置：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | module.exports = { modules: [ '@nuxtjs/axios', ], axios: { proxy: true, prefix: '/api/', credentials: true }, proxy: { '/api/': { target: 'https://xxx.cn', pathRewrite: { '^/api/': '/', changeOrigin: true } } }, build: { vendor: ['axios'], } } |
2.3 在组件中调用：
1 2 3 4 5 | mounted() { this.$axios.get("/index").then(res=>{ console.log(res) }) } |
3. nuxt中使用axios：
3.1 下载axios：npm install --save axios
3.2 在需要的页面引入使用：import axios from "axios"
1 2 3 | axios.get("user.json").then(res=>{ console.log(res) }) |
4. nuxt使用mock：
4.1 下载mock：npm install --save mock
4.2 在plugins/mock.js文件创建：
1 2 3 4 5 6 7 8 | var Mock = require('mockjs') Mock.mock(/user\.json/, { 'list|1-10': [{ 'id|+1': 1, 'email': '@EMAIL' }] }) |
4.3 在nuxt.config.js引入mock插件：
1 2 3 | plugins: [ { src: '~plugins/mock', ssr: true } ] |
4.4 在axios请求mock的数据：
1 2 3 | axios.get("user.json").then(res=>{ console.log(res) }) |
