將es6轉為es5
下載插件
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill
在main.js中引用
import 'babel-polyfill'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()
在項目根目錄下新建 .babelrc 文件，跟 package.json 同級
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
在babel.config.js文件中配置
const plugins = [];
module.exports = {
presets: [
[
"@vue/app",
{
"useBuiltIns": "entry",
polyfills: [
'es6.promise',
'es6.symbol'
]
}
]
],
plugins: plugins
}
在vue.congig.js中進行配置
const webpack = require("webpack");
const path = require('path');
function resolve(dir) {
return path.join(__dirname, '.', dir);
}
transpileDependencies: ['webpack-dev-server/client'],
chainWebpack: config => {
config.entry.app = ['babel-polyfill', './src/main.js'];
},
一般配置到這里就能解決白屏問題
如果沒有就把下面這段代碼 放入 vue.config.js文件chainWebpack: config => { }中
config.module.rule('compile')
.test(/\.js$/)
.include
.add(resolve('src'))
.add(resolve('node_modules/webpack-dev-server/client'))
.add(resolve('node_modules'))
.end()
.use('babel')
.loader('babel-loader')
.options({
presets: [
['@babel/preset-env', {
modules: false
}]
]
})