css 两个布局（Front 和 Admin）在生产模式下不起作用

Question

我是 vue js 新手。我使用 vue cli 设置了新的 vue 项目，还选择了模板 webpack。我的项目有两部分：前端和管理面板。两者都有不同的模板。因此，我为所有后端组件提供路由元 "backend"。我按照 main.js

中的逻辑添加了所有 css

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 覆盖了前端。

请给我任何解决方案。

谢谢

Answer 1

我知道如何在单页模式下完成，如果你喜欢 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，模板和js都在一个页面里面。

那你就可以使用vue-router或者dynamic-async组件对后端或者前端进行充电...

https://vuejs.org/v2/guide/routing.html路由器
https://vuejs.org/v2/guide/components-dynamic-async.html 动态异步

如果你想坚持你的组织（我不知道）。使用 webpack4，您可以将 js 分块到单独的文件中：

https://webpack.js.org/guides/code-splitting/

但我认为这还不够，您可能需要使用 promise 来动态设置 css :

() => import('./../static/backend.css')

css 两个布局（Front 和 Admin）在生产模式下不起作用

css for two layouts (Front and Admin) not working in production mode

css

production

webpack

vuejs2

vue-cli