vue 每个组件的 js 和 css 都单独打包输出到页面？

  • Z时代
  • 2024-03-10
  • 分类：IT

比如一个页面里有 a.vue b.vue c.vue 三个子组件
如何能将这三个组件分别打包成下面这样渲染，每个组件的逻辑都打包在自己的 js 里，css 样式也单独抽离。
不影响 chunk-vendors.css 和 chunk-vendors.js

<head>
<link href="/css/chunk-vendors.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/a.css">
<script charset="utf-8" src="/js/a.js"></script>
<link rel="stylesheet" type="text/css" href="/css/b.css">
<script charset="utf-8" src="/js/b.js"></script>
<link rel="stylesheet" type="text/css" href="/css/c.css">
<script charset="utf-8" src="/js/c.js"></script>
</head>
<body>
...
<script src="/js/chunk-vendors.js"></script>
</body>

回答：

组件按需引入就可以实现单独打包，至于打包后的文件名修改，可以参考我之前的一篇文章webpack打包时如何修改文件名

const Test = () => import(/* webpackChunkName: "atest" */ './test.vue')
export default {
    components: {
      Test
    },
}

以上是 vue 每个组件的 js 和 css 都单独打包输出到页面？ 的全部内容， 来源链接： utcz.com/p/933190.html

回到顶部