vue项目打包总结（babel安装问题、打包后直接访问dist文件夹、elementui样式失效等）

一、babel安装问题

报错主要原因是：
babel-loader和babel-core版本不对应所产生的，
babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x
通过参考文章还有官方文档简单总结：

安装babel-loader 8.x

npm install -D babel-loader@8.0.4

安装babel-loader 7.x

npm install -D @babel/core

babel8.x需要安装的包有：

babel-loader：加载器（这个没有@符号）
@babel/core: babel核心包,babel-loader的核心依赖；
@babel/plugin-proposal-class-properties: 用来解析类的属性的；
@babel/runtime和@babel/plugin-transform-runtime：babel 编译时只转换语法，几乎可以编译所有时新的 JavaScript 语法，但并不会转化BOM（浏览器）里面不兼容的API。比如 Promise,Set,Symbol,Array.from,async 等等的一些API。这2个包就是来搞定这些api的；
@babel/preset-env：ES语法分析包；

在.babelrc中添加

{

  "presets": ["@babel/preset-env"],

  "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]

}

具体可以查看文章：详解babel8.X版本用法填坑（babel-loader ， @babel/core , @babel/plugin-stransform-runtime, @babel/preset-env）
以及官方文档：webpack中文文档

二、打包后直接访问dist文件夹

这个忘记在哪个文章的评论里看到的了，挺好用的，有时间再研究一下是什么东西

官方文档有简单的方法:
全局安装：
npm install -g serve

直接运行打包后的dist文件
serve -s dist
打开浏览器访问即可

三、打包后elementui样式失效

将elementui样式的引用放在引入App前

import Vue from 'vue'
// 放在引入App前解决打包后elementui样式失效问题
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
```js
具体可以参考：[Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题](http://www.hellojava.com/a/91429.html)

### 如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~