一、css文件引用图片时,路径的填写
官方文档说明:
从Nuxt 2.0开始,~/alias将无法在CSS文件中正确解析。你必须在url CSS引用中使用~assets(没有斜杠)或@别名,即background:url("~assets/banner.svg")
发现用‘@’来代表根目录出现图片路径不正确的问题,用‘~’就正常 (这里指css)。
二、nuxt配置proxy代理
首先安装 @nuxtjs/axios和@nuxtjs/proxy来处理 axios 跨域问题。
npm i @nuxtjs/axios @nuxtjs/proxy -D
然后在 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标签
浏览器查看:
四、nuxt-link标签在填写跳转路径时,参数的传递方式
①、name + params
<nuxt-link :to="{'name': '/detail-id', 'params': {id: item.id}}">详情页</nuxt-link>
=>http://localhost:3030/detail/11
组件中在asyncData可以用context.app.$route.params.id获取参数,若组件实例完成,则可以用this.$route.params.id。
②、path + query
<nuxt-link :to="{'path': '/detail', 'query': {id: item.id}}">详情页</nuxt-link>
=>http://localhost:3030/detail?id=11
组件中在asyncData可以用context.app.$route.query.id获取参数,若组件实例完成,则可以用this.$route.query.id。
五、plugins配置
使用vue插件,又或是将自定义插件注入上下文context或vue实例上,注意plugins的位置。
build下面的plugins属性是用来添加 Webpack 插件的。