css для двух макетов (Front и Admin) не работает в рабочем режиме

Я новичок в vue js. Я настроил новый проект vue с помощью vue cli, а также выбрал шаблон webpack. Мой проект состоит из двух частей: внешнего интерфейса и панели администратора. У обоих разные шаблоны. Итак, я даю мета «бэкэнд» маршрута для всех компонентов бэкэнда. Я добавил все css, следуя логике в main.js

if (to.matched.some(record => record.meta.backend)) {
   require('../static/backend.css')
   next()
  } else {
    require('../static/frontend.css')
    next()
  }
})

Когда я запускаю команду «npm run dev», все css работают отлично, но когда я запускаю команду «npm run build», все css объединяются в один файл. Так что мой бэкэнд css переопределяет внешний интерфейс.

Пожалуйста, дайте мне любое решение для этого.

Спасибо


webpack css vuejs2 vue-cli production
person Paresh Lalvani    schedule 25.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я вижу, как это сделать в одностраничном режиме, если вам нравятся файлы js, css и html:

Фронтенд.vue:

<style scoped  lang="css" src="../static/frontend.css"></style>
<template src='./frontend.html'></template>
<script src='./frontend.js'></script>

Backend.vue:

<style scoped  lang="css" src="../static/backend.css"></style>
<template src='./backend.html'></template>
<script src='./backend.js'></script>

но в большинстве случаев css, template и js находятся внутри одной страницы.

Затем вы можете использовать компоненты vue-router или dynamic-async для зарядки бэкэнда или внешнего интерфейса...

Если вы хотите придерживаться своей организации (чего я не знаю). С помощью webpack4 вы можете разделить свои js на отдельные файлы:

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

() => import('./../static/backend.css')
person Lucile Fievet    schedule 12.06.2018