nuxt.js踩的坑

一、css文件引用图片时,路径的填写

官方文档说明：

从Nuxt 2.0开始，~/alias将无法在CSS文件中正确解析。你必须在url CSS引用中使用~assets（没有斜杠）或@别名，即background:url("~assets/banner.svg")

发现用‘@’来代表根目录出现图片路径不正确的问题，用‘~’就正常 (这里指css)。

common.less

---

二、nuxt配置proxy代理

首先安装 @nuxtjs/axios和@nuxtjs/proxy来处理 axios 跨域问题。

npm i @nuxtjs/axios @nuxtjs/proxy -D

然后在 nuxt.config.js 文件里进行配置

nuxt.config.js

这样就配置好了axios和proxy。

当我们使用axios发送请求时

如果你使用axios发送请求且路径是/bins/g9hse,

那么会被axios中的prefix属性加上前缀,即/api/bins/g9hse

而proxy会使得请求变为，http://localhost:3000/api/bins/g9hse

一般情况下，在组件中，可以这样使用：

mounted() {

    this.$axios.get(url).then( res -> {...});

}

而在asyncData中，不能直接使用this引用。可以这样：

async asyncData ({ app }) { 

    let { data } = await app.$axios.get(url).then( res -> {...});

}

ps: {app}相当于context.app，是es6的一个语法

---

三、用head函数在页面内设置单独的title和meta标签

组件.vue

浏览器查看：

浏览器f12

---

四、nuxt-link标签在填写跳转路径时，参数的传递方式

①、name + params

详情页

=>http://localhost:3030/detail/11

组件中在asyncData可以用context.app.$route.params.id获取参数，若组件实例完成，则可以用this.$route.params.id。

②、path + query

详情页

=>http://localhost:3030/detail?id=11

组件中在asyncData可以用context.app.$route.query.id获取参数，若组件实例完成，则可以用this.$route.query.id。

---

五、plugins配置

使用vue插件，又或是将自定义插件注入上下文context或vue实例上，注意plugins的位置。

build下面的plugins属性是用来添加 Webpack 插件的。

nuxt.config.js