本文主要是介绍vue-cli 4 的es5兼容问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
第一步 mian.js引入一下两个模块
babel-polyfill 已经废弃，而且babel-polyfill就是由这两个构成的，所以直接引入这个两个即可
import 'core-js';
import 'regenerator-runtime/runtime';
第二步 修改babel.config.js文件
browsers 根据自己需求更改
module.exports = {presets: [['@vue/app', {'targets': {'browsers': ['ie >= 9', 'safari >= 7']},useBuiltIns: 'entry',polyfills: ['es6.promise','es6.symbol']}]]
}
第三步 vue.config.js文件添加 transpileDependencies: []
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
vue.config.js完整配置
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const {HashedModuleIdsPlugin} = require('webpack');// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css', 'html']module.exports = {productionSourceMap: false, // 关闭生产环境的 source maplintOnSave: false,publicPath: process.env.VUE_APP_PUBLIC_PATH,// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。transpileDependencies: ["vconsole"],chainWebpack: config => {// 移除 prefetch 插件config.plugins.delete('prefetch');// 移除 preload 插件，避免加载多余的资源config.plugins.delete('preload');// 配置 打包分析config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);},configureWebpack: config => {if (process.env.NODE_ENV === 'production') { // 生产环境// 对资源文件进行压缩config.plugins.push(new CompressionWebpackPlugin({filename: '[path].gz[query]', // 提示 compression-webpack-plugin@3.0.0的话asset改为filenamealgorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240,minRatio: 0.8}));// 去除console.log打印以及注释config.plugins.push(new UglifyJsPlugin({uglifyOptions: {output: {comments: false, // 去掉注释},warnings: false,compress: {drop_console: true,drop_debugger: false,pure_funcs: ['console.log']//移除console}}}));// 只打包改变的文件config.plugins.push(new HashedModuleIdsPlugin());// 公共代码抽离config.optimization = {splitChunks: { // 分割代码块cacheGroups: {vendor: {//第三方库抽离chunks: 'all',test: /node_modules/,name: 'vendor',minChunks: 1,//在分割之前，这个代码块最小应该被引用的次数maxInitialRequests: 5,minSize: 0,//大于0个字节priority: 100//权重},common: { //公用模块抽离chunks: 'all',test: /[\\/]src[\\/]js[\\/]/,name: 'common',minChunks: 2, // 在分割之前，这个代码块最小应该被引用的次数maxInitialRequests: 5,minSize: 0,//大于0个字节priority: 60},styles: { //样式抽离name: 'styles',test: /\.(sa|sc|c)ss$/,chunks: 'all',enforce: true},runtimeChunk: {name: 'manifest'}}}};// 取消webpack警告的性能提示config.performance = {hints: 'warning',//入口起点的最大体积maxEntrypointSize: 1000 * 500,//生成文件的最大体积maxAssetSize: 1000 * 1000,//只给出 js 文件的性能提示assetFilter: function (assetFilename) {return assetFilename.endsWith('.js');}};}},
}这篇关于vue-cli 4 的es5兼容问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
