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