Nuxt.js如何在Vue插件中访问static目录？本地与构建后均生效

我来帮你搞定这个路径问题！其实核心原因是vue-lazyload的配置选项里，loading的路径并不会被Nuxt的Webpack别名解析（比如~/这种），因为这部分配置是直接在浏览器端运行的，Webpack不会处理这里的路径字符串。

正确的路径设置方式 #

Nuxt的static目录下的资源，最终会被复制到网站的根目录（不管是开发环境还是nuxt generate构建后的静态站点），所以你只需要使用根路径开头的相对地址即可：

修改你的插件代码如下：

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
const options = {
 preLoad: 1.3,
 loading: '/media/loader.svg', // 直接用根路径指向static下的文件
 attempt: 1,
 listenEvents: [ 'scroll' ]
}
Vue.use(VueLazyload, options)

为什么这样可行？ #

• 开发环境下，Nuxt会把static目录作为静态资源根目录，访问/media/loader.svg就会对应到~/static/media/loader.svg
• 执行nuxt generate后，static里的文件会被完整复制到生成的dist目录的根路径下，所以/media/loader.svg依然能正确指向dist/media/loader.svg

注意事项 #

如果你的图片在static下的其他子目录，比如static/images/loader.gif，那对应的路径就是/images/loader.gif，只要保持路径是从根目录开始的绝对路径（相对于网站域名）就可以了。

内容的提问来源于stack exchange，提问作者Merc