rollup打包vue
时间: 2023-08-19 13:06:14 浏览: 49
Rollup是一个JavaScript模块打包器,可以用于打包Vue项目。在Vue 2中,使用的是rollup-plugin-vue插件的版本为^5.1.9,同时需要使用vue-template-compiler来编译Vue模板。而在Vue 3中,使用的是rollup-plugin-vue插件的版本为^6.0.0,同时需要使用@vue/compiler-sfc来编译Vue单文件组件。这两个版本的插件和编译器不同,因此在配置中需要注意版本的兼容性。另外,rollup-plugin-vue默认支持scss、less、stylus等样式预处理器,并且可以自动为.vue文件中的css添加前缀。要实现这个功能,需要在rollup-plugin-vue的配置中添加postcssPlugins选项,并引入autoprefixer和cssnano等插件。具体的配置可以参考以下代码示例:
```javascript
import vue from 'rollup-plugin-vue'
import autoprefixer from 'autoprefixer'
import cssnano from 'cssnano'
export default {
// ...
plugins: \[
vue({
style: {
postcssPlugins: \[
autoprefixer(),
cssnano()
\]
}
})
\]
}
```
这样配置后,rollup-plugin-vue会自动处理.vue文件中的样式,并为其添加前缀。希望对你有帮助!\[1\]
#### 引用[.reference_title]
- *1* [rollup打包vue组件](https://blog.csdn.net/weixin_46787337/article/details/128296721)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [Vue 是如何用 Rollup 打包的?](https://blog.csdn.net/u012384510/article/details/123081204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]