Активы изображений vue 2 не отображаются при сборке - PullRequest
Новая
       21

Активы изображений vue 2 не отображаются при сборке

0 голосов
/ 10 мая 2019

У меня есть проект СПА с этой структурой: 


    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 У меня такое же содержимое плагинов / изображений. Когда я устанавливаю изображения на компоненты или виды, я делаю что-то вроде: 


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

Они в режиме разработки работают нормально, но я вижу, когда проверяю выполняемый код, что src attr изменяется для src="/img/hanna.jpg". Таким образом, при запуске скрипта сборки один и тот же префикс attr (/ img /) устанавливается для всех атрибутов src.

Из-за этого ни одно изображение не показывается. И я не могу найти никакой помощи, чтобы установить конфигурацию для этого.

Мой 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"
          })
        ]
      }
    }

1 Ответ

0 голосов
/ 10 мая 2019

Операция правильная, если вы не видите фотографии, это потому, что она, вероятно, не раскрывает эти ресурсы.

Вы должны обслуживать папку "img".Это происходит автоматически в среде разработки, но вы должны думать об этом в производственной среде.Вы также можете сделать это с помощью простого файла htaccess

...