安装插件
npm i @babel/preset-env -D
npm 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-API
import "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");