CSS для двух макетов (Front и Admin) не работает в производственном режиме - PullRequest
Новая
       9

CSS для двух макетов (Front и Admin) не работает в производственном режиме

0 голосов
/ 25 апреля 2018

Я новичок в 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 на внешнем интерфейсе.

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

Спасибо

1 Ответ

0 голосов
/ 12 июня 2018

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

Frontend.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')
...