Question

我是vue js的新手。我使用vue cli设置了新的vue项目，并选择了模板webpack。我的项目有两个部分：前端和管理面板。两者都有不同的模板。所以，我为所有后端组件提供路由元“后端”。我通过遵循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，template和js都在单页内。

然后你可以使用vue-router或dynamic-async组件为后端或前端充电......

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

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

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

但我认为这还不够，你可能需要使用一个动态设置css的承诺：

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

两个布局（前端和管理员）的CSS不在生产模式下工作

1 个答案: