background: url($src + '/images/500.png');
}
添加IE兼容
npm i --save @babel/polyfill
在main.js中添加
import '@babel/polyfill';配置babel.config.js
const plugins = [];module.exports = {
presets: [["@vue/app",{"useBuiltIns": "entry"}]],
plugins: plugins
};
完整配置
安装依赖
npm i –save-dev compression-webpack-plugin babel-plugin-transform-remove-console @gfx/zopfli brotli-webpack-plugin
package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"analyz": "vue-cli-service build --mode analyz",
"lint": "vue-cli-service lint"
}
babel.config.js
const plugins = [];
// if(['production', 'prod'].includes(process.env.NODE_ENV)) {
// plugins.push("transform-remove-console")
// }module.exports = {
presets: [["@vue/app",{"useBuiltIns": "entry"}]],
plugins: plugins
};
vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// const zopfli = require("@gfx/zopfli");
// const BrotliPlugin = require("brotli-webpack-plugin");
const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;
module.exports = {
baseUrl: './', // 默认'/',部署应用包时的基本 URL
outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false,
runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: false, // 生产环境的 source map
configureWebpack: config => {
// config.externals = {
// 'vue': 'Vue',
// 'element-ui': 'ELEMENT',
// 'vue-router': 'VueRouter',
// 'vuex': 'Vuex',
// 'axios': 'axios'
// }
if (IS_PROD) {
const plugins = [];
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']//移除console
}
},










