Блог

Главная - Вопросы по программированию - Значки пользовательского интерфейса элементов не будут отображаться при использовании Laravel Mix

Значки пользовательского интерфейса элементов не будут отображаться при использовании Laravel Mix

#javascript #vue.js #babeljs #laravel-mix #element-ui

#javascript #vue.js #babeljs #laravel-mix #element-ui

Вопрос:

Я создал простой веб-сайт, используя Vue и Element UI. Я использовал Laravel Mix для компиляции своего кода.

Во время разработки значки отображаются, но когда я запускаю «npm run prod» и загружаю его на страницы Github, они не отображаются.

Это мой webpack.mix.js

 let mix = require('laravel-mix');

mix.js('src/js/app.js', 'public/')
.sass('src/styles/app.scss', 'public/')
.babelConfig({})
.disableNotifications();

Я использую компоненты по требованию и следовал этому документу, поэтому мой корневой файл vue выглядит следующим образом:

 import Vue from 'vue'
import store from './vuex'
import router from './vue-router'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import lang from 'element-ui/lib/locale/lang/es'
import locale from 'element-ui/lib/locale'

locale.use(lang)

Vue.use(Loading.directive);
Vue.component(Select.name, Select)
Vue.component(Option.name, Option)
Vue.component(Input.name, Input)
Vue.component(Icon.name, Icon)

new Vue({
    el: '#app',
    router,
    store,
});

Следуя тому же документу, я добавил файл .babelrc в свой корневой каталог, но мне не удалось заставить его работать с предустановкой es2015 , поэтому я использовал @babel/preset-env вместо этого. На самом деле я не знаю, как правильно использовать Babel, поэтому вся ошибка может быть здесь, но idk.

 {
    "presets": [["@babel/preset-env", { "modules": false }]],
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  }

Я заметил что-то странное, когда я запускаю npm run prod, на выходе отображается что-то вроде этого:
введите описание изображения здесь

Папка fonts и необходимые шрифты копируются в мой корневой каталог, поэтому, когда он находится на Github, он отправляет запрос в корневой домен, корневую папку, правильный URL-адрес должен быть завершен (я полагаю?) /h3lltronik.github.io/my-site/ , Но он включен /h3lltronik.github.io/ .

введите описание изображения здесь

На всякий случай, если это необходимо, я использую такие значки:

 <el-input v-model="search" prefix-icon="el-icon-search" class="filter_input element-input bordered" @input="onChangeSearch"
        placeholder="Search for a country..."></el-input>

И это мой index.html

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H3lltronik</title>

    <link rel="stylesheet" href="./public/app.css">
</head>
<body>
    <div id="app" :class="modeClass">
        <transition name="el-fade-in">
            <router-view class="content-body"></router-view>
        </transition>
    </div>

    <script src="./public/app.js"></script>
</body>
</html>
Метки: