NuxtJS 在生产环境中更改资产文件名

【问题标题】：NuxtJS Changes assets file names in productionNuxtJS 在生产环境中更改资产文件名
【发布时间】：2020-06-13 19:01:22
【问题描述】：

我是 VueJS、NuxtJS、Webpack 的新手。目前将 NuxtJS 用于静态站点，到目前为止它运行良好。唯一让我担心的是文件名是资产文件夹在构建后会更改为一些哈希值。例如：

~/assets/images/image.png

更改为：

/_nuxt/img/1e88315.png

不管怎样，我们可以使用相同的图像名称或带有哈希的图像名称，例如：/_nuxt/img/image-1e88315.png

另外，我们是否可以将_nuxt 文件夹名称更改为其他名称？

谢谢！

【问题讨论】：

标签： vue.js webpack nuxt.js

【解决方案1】：

您可以通过文件名选项在 nuxt.config.js 中更改此设置。

默认是：

{
  app: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js',
  chunk: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js',
  css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css',
  img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]',
  font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]',
  video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]'
}

文档：https://nuxtjs.org/api/configuration-build/#filenames

所以在你的情况下它会是（如果你想在生产中保留名字）：

build: {
    filenames: {
      img: 'img/[name]-[contenthash:7].[ext]'
    }
}

【讨论】：