使用 Nuxt 生成具有相对路径的静态文件答案

【问题标题】：Generating static files with relative paths with Nuxt使用 Nuxt 生成具有相对路径的静态文件
【发布时间】：2019-01-22 09:51:29
【问题描述】：

使用yarn run generate 生成静态文件时如何更改文件路径？

例如，我需要得到<img src="images/image.png">，但默认情况下我得到<img src="/image/image.png 我尝试使用下面的配置，并且我有正确的.js 文件路径，但是js 文件中的代码没有运行。感谢您的帮助。

extend(config, ctx) {
  if (ctx.isDev && ctx.isClient) {
    config.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules)/
    })
  }

  if (!ctx.isDev && ctx.isClient) {
    // eslint-disable-next-line no-param-reassign
    config.output.publicPath = '_nuxt/'
  }
}

【问题讨论】：

标签： vue.js webpack nuxt.js

【解决方案1】：

如果您从资产目录加载图片，则文件具有动态路径，具体取决于它们当前加载的位置。您可以借助网页生成路径：

<img :src="require('~/assets/images/image.png)">

另一方面，在静态目录的情况下 - 文件被复制到主目录，这就是为什么您使用主位置的路径，例如

<img src="images/image.png">

【讨论】：