Vue.js img src 使用绝对路径（django+webpack）

Question

我正在使用 django + Vue.js 和 webpack 进行开发。在我的 App.vue 文件中，我尝试加载 img:
<img src="/static/webapp/img/logo.png" alt="logo">
在生产中，我使用 nginx，它将 /static 路径引导到我共享的 static 文件夹中并且它正在工作。
但是在开发中，当我在 localhost:8000 上运行我的 django 并从我的 App.vue 加载这个 js 时，它试图从 localhost:8000/static/webapp/img/logo.png 获取图像。
我希望它可以从localhost:8082/static/webapp/img/logo.png（localhost:8082 是运行 webpack 的位置）获取。
我尝试在我的 webpack.config.js 中更改 publicPath：

if (process.env.NODE_ENV === 'development') {  
  module.exports.output.publicPath = 'http://localhost:8082/'
}

但它不会改变默认行为，并且 img 资产 src 仍然是 localhost:8000/static/webapp/img/logo.png。
如何将 img 资产默认基本路径更改为另一个 url 以使其正常工作？
干杯。

Answer 1

我解决了：

1. 当我运行 webpack 节点服务器时，我添加了 mode 环境变量：
   NODE_ENV=development node server.js
2. 我把img src改成：
   <img :src="`${STATIC_URL}/webapp/img/logo.png`" alt="logo">
3. 基于NODE_ENV设置STATIC_URL：

export default {
  ...,
  data () {
    return {
      ...,
      STATIC_URL: process.env.NODE_ENV === "development" ? "http://localhost:8082/static" : "/static"
    }
  }
}

它按照它应该的方式工作。干杯。