安装插件
npm i @babel/preset-env -Dnpm i babel-plugin-component -D
.babelrc
{"presets": [["@babel/preset-env",{"modules": false}]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]}
vue.config.js
configureWebpack=>entry 配置入口文件的babel-polyfill
const path = require('path');const webpack = require('webpack');const Version = new Date().getTime()const CompressionWebpackPlugin = require('compression-webpack-plugin')const PrerenderSPAPlugin = require('prerender-spa-plugin');const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;function resolve(dir) {return path.join(__dirname, dir)}console.log(process.env.NODE_ENV)module.exports = {publicPath: '/',pages: {index: {// page 的入口entry: 'src/main.js',// 模板来源template: process.env.NODE_ENV == 'test' || process.env.NODE_ENV == 'development' ? 'public/index-dev.html' : 'public/index-pro.html',// 在 dist/index.html 的输出filename: 'index.html',chunks: ['chunk-vendors', 'chunk-common', 'index']}},outputDir: 'dist',assetsDir: 'assets',lintOnSave: true,chainWebpack: () => { },configureWebpack: {entry: {app: ['babel-polyfill', './src/main.js']},resolve: {alias: {'@': resolve('src'),'static': resolve("public/static")}},output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】filename: `[name].${Version}.js`,chunkFilename: `[name].${Version}.js`}},}
main.js
头部加入babel-polyfill
//适配IE低版本,Web-APIimport "babel-polyfill";import Vue from "vue";import App from "./App.vue";import router from "./router";import store from "./store";import moment from "moment";import ElementUI from "element-ui";Vue.use(ElementUI, {size: "small"});new Vue({router,store,render: h => h(App),mounted() {document.dispatchEvent(new Event("render-event"));}}).$mount("#app");
