安装插件

  1. npm i @babel/preset-env -D
  2. npm i babel-plugin-component -D

.babelrc

  1. {
  2. "presets": [
  3. [
  4. "@babel/preset-env",
  5. {
  6. "modules": false
  7. }
  8. ]
  9. ],
  10. "plugins": [
  11. [
  12. "component",
  13. {
  14. "libraryName": "element-ui",
  15. "styleLibraryName": "theme-chalk"
  16. }
  17. ]
  18. ]
  19. }

vue.config.js

configureWebpack=>entry 配置入口文件的babel-polyfill

  1. const path = require('path');
  2. const webpack = require('webpack');
  3. const Version = new Date().getTime()
  4. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  5. const PrerenderSPAPlugin = require('prerender-spa-plugin');
  6. const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
  7. function resolve(dir) {
  8. return path.join(__dirname, dir)
  9. }
  10. console.log(process.env.NODE_ENV)
  11. module.exports = {
  12. publicPath: '/',
  13. pages: {
  14. index: {
  15. // page 的入口
  16. entry: 'src/main.js',
  17. // 模板来源
  18. template: process.env.NODE_ENV == 'test' || process.env.NODE_ENV == 'development' ? 'public/index-dev.html' : 'public/index-pro.html',
  19. // 在 dist/index.html 的输出
  20. filename: 'index.html',
  21. chunks: ['chunk-vendors', 'chunk-common', 'index']
  22. }
  23. },
  24. outputDir: 'dist',
  25. assetsDir: 'assets',
  26. lintOnSave: true,
  27. chainWebpack: () => { },
  28. configureWebpack: {
  29. entry: {
  30. app: ['babel-polyfill', './src/main.js']
  31. },
  32. resolve: {
  33. alias: {
  34. '@': resolve('src'),
  35. 'static': resolve("public/static")
  36. }
  37. },
  38. output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
  39. filename: `[name].${Version}.js`,
  40. chunkFilename: `[name].${Version}.js`
  41. }
  42. },
  43. }

main.js

头部加入babel-polyfill

  1. //适配IE低版本,Web-API
  2. import "babel-polyfill";
  3. import Vue from "vue";
  4. import App from "./App.vue";
  5. import router from "./router";
  6. import store from "./store";
  7. import moment from "moment";
  8. import ElementUI from "element-ui";
  9. Vue.use(ElementUI, {
  10. size: "small"
  11. });
  12. new Vue({
  13. router,
  14. store,
  15. render: h => h(App),
  16. mounted() {
  17. document.dispatchEvent(new Event("render-event"));
  18. }
  19. }).$mount("#app");