问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
js小白白
    601732

    比如一个页面里有 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>
    vue.jswebpack
    阅读 1.7k
    1 个回答
    得票最新
    头像
    hfhan
      28.9k72241

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

      const Test = () => import(/* webpackChunkName: "atest" */ './test.vue')
export default {
    components: {
      Test
    },
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏