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">

这些在开发人员模式下工作正常，但是当检查运行src属性为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未显示在构建版本上

1 个答案: