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

Posted 2023-02-22

【中文标题】Vue.js img src 使用绝对路径（django+webpack）

【英文标题】：Vue.js img src using absolute path (django+webpack)

【发布时间】：2020-08-17 13:29:55

【问题描述】：

我正在使用 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 以使其正常工作？ 干杯。

【问题讨论】：

这可能会帮助你***.com/questions/38164102/…

【参考方案1】：

我解决了：

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

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

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