Image Assets vue 2 未在构建中显示

Question

我有一个具有这种结构的 SPA 项目：


    public
      - css
      - data
      - images
    src
      - assets
      - components
      - plugins
        - components
        - images
     - views

我在 package.json 上有这个脚本：


      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "test:unit": "vue-cli-service test:unit",
        "test:e2e": "vue-cli-service test:e2e"
      }

在 public/images 文件夹中我有与 plugins/images 相同的内容。当我在组件或视图上设置图像时，我会做类似的事情：


    <img src="../plugins/images/users/hanna.jpg" alt="user-img" class="img-circle">

这些在开发模式下工作正常，但我可以在检查代码运行ing 时看到 src attr 已针对 src="/img/hanna.jpg" 更改。这样，当ai 运行构建脚本时，所有src 属性都设置了相同的前缀attr (/img/)。

因此，任何图像都不会显示。我找不到为此设置配置的任何帮助。

我的vue.config.js是：


    var webpack = require('webpack');

    module.exports = {
      lintOnSave: false,
      publicPath: process.env.NODE_ENV === 'production'
        ? 'https://XXXX.cloudfront.net/'
        : '/',
      productionSourceMap: false,
      filenameHashing: false,
      configureWebpack: {
        plugins: [
          new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.jQuery': 'jquery',
            Chartist: "chartist",
            Raphael: "raphael"
          })
        ]
      }
    }

Answer 1

操作正确，如果你看不到照片，那是因为它可能没有暴露那些资源。

您必须提供 "img" 文件夹。这在开发环境中自动发生，但您必须在生产环境中考虑它。你也可以用一个简单的 htaccess 文件来做到这一点

Image Assets vue 2 未在构建中显示

Image Assets vue 2 dont showing on build

javascript

ecmascript-6

webpack

vuejs2

vue-cli