Nuxt.js中npm run build时router.base对静态资源路径不生效？

问题根因 #

开发时Nuxt会自动帮你把根路径的静态资源重定向到router.base指定的路径下，但构建生产包的时候，不会自动修改你硬写的/mockups/xxx.png这种根路径地址，导致路径错位找不到资源。

可行解决方案 #

1. 用Nuxt的资源别名引用静态资源 #

把组件里的图片路径改成用~或@开头，Nuxt构建时会自动结合router.base生成正确路径：

<img src="~/static/mockups/macbookpro_01.png" />
<!-- 或者用@别名 -->
<img src="@/static/mockups/macbookpro_01.png" />

注意：图片必须放在项目根目录的static文件夹里，这是Nuxt默认的静态资源存放位置。

2. 动态拼接环境变量路径 #

直接在组件里用环境变量拼资源路径，构建时会自动注入正确的前缀：

<img :src="`${process.env.ROUTER_BASE}mockups/macbookpro_01.png`" />

记得在nuxt.config.js里把ROUTER_BASE暴露给客户端环境：

const ROUTER_BASE = `/${process.env.ENTITY.toLowerCase()}/`;
export default {
  router: {
    base: ROUTER_BASE
  },
  env: {
    ROUTER_BASE: ROUTER_BASE
  }
}

3. 配置build.publicPath统一静态资源前缀（Nuxt 2适用） #

在nuxt.config.js里加个build.publicPath配置，让所有静态资源的基础路径和router.base保持一致：

const ROUTER_BASE = `/${process.env.ENTITY.toLowerCase()}/`;
export default {
  router: {
    base: ROUTER_BASE
  },
  build: {
    publicPath: ROUTER_BASE
  }
}

这样构建后，不管是图片、CSS还是JS，都会自动带上router.base的前缀，你原来写的/mockups/macbookpro_01.png也能正常访问。

验证步骤 #

执行npm run build && npm run start启动生产服务，打开浏览器检查图片的请求地址，确认已经带上了/my/（或你的ENTITY对应的值）前缀，能正常加载就算搞定了。

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