关于vuejs中静态资产的另一个问题答案

【问题标题】：Another question about static assets in vuejs关于vuejs中静态资产的另一个问题
【发布时间】：2021-01-07 23:35:51
【问题描述】：

尝试在 vue 组件中设置 img src 时，我在 vuejs 中看到了新行为。 img src 不断设置为类似于我的 publicPath (app/mm/dist/dev) 的东西。这个项目正在使用 vuetify；但我不知道 vuetify 会如何参与直接的 <img> 标签。

我的模板如下所示：

<img id="activity" :src="asyncImg" class="async-img" />

在脚本块中我正在这样做：

data: function() {
    return {
        asyncImg: require("@/assets/async.gif")
    };
},

我得到的是这样的：

<img data-v-2a5cd2eb="" 
     id="activity" 
     src="/app/mm/distdevasync.gif?817596d6626736251eea50f61b9492a4" 
     class="async-img">

【问题讨论】：

webpack.js.org/loaders/file-loader

标签： vue.js webpack

【解决方案1】：

好的，想通了。与 vue.js 或 vuetify 无关，与 webpack 有关。 publicPath 需要以斜线结尾。我正在这样做：

var PROD = (process.env.NODE_ENV === 'production')
var DEV = (process.env.NODE_ENV === 'development')
...
   publicPath:
        PROD
            ? '/app/mm/dist/prd'
            : DEV
                ? '/app/mm/dist/dev'  // standard development, devw
                : '/dist',    // hot-reload, devhr

需要这样：

  ...
  publicPath:
    PROD
        ? '/app/mm/dist/prd/'
        : DEV
            ? '/app/mm/dist/dev/'  // standard development, devw
            : '/dist/',    // hot-reload, devhr

注意所有路径末尾的“/”。使用 vue-cli 这么久了，我几乎忘记了我曾经知道的关于 webpack 配置的一切。这是一个在 vue-cli 时代之前开始的老项目，所以 webpack 中的资产管理是老派的；所有资产输出到 publicPath。

【讨论】：