Los problemas de compatibilidad de Vue-cli2 es6 provocan una pantalla en blanco

Los problemas de compatibilidad de Vue-cli2 es6 provocan una pantalla en blanco

Con respecto al proyecto Vue, la mayoría de los casos en los que se abre una pantalla en blanco en el navegador se deben a la incompatibilidad de la sintaxis de es6, permítanme hablar sobre la solución a continuación.

Solución

1. babel-polyfill es6-promisePaquete de instalación

npm i babel-polyfill es6-promise --save

2. Luego main.jsagregue lo siguiente en:

import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

注意:la importación 'babel-polyfill' debe introducirse antes de importar Vue desde 'vue';

3. webpack.base.conf.jsAgregue lo siguiente en

module.exports = {
	...
     entry: {
     app: ["babel-polyfill", "./src/main.js"]
     }
     ...
}

Si la pantalla sigue en blanco después de la configuración, es probable que la dependencia de terceros recién agregada tenga sintaxis es6. Babel-polyfill no detecta es6 en node_modules, por lo que debemos agregarlo manualmente. Por ejemplo, mi nueva dependencia esswiper

Solución

Modifique la configuración webpack.base.conf.jsen el archivo babel-loader:

{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test'), resolve('node_modules/swiper') ,resolve('node_modules/webpack-dev-server/client')]},

Luego reinicie el proyecto.

La incompatibilidad de sintaxis de Vue-cli3 ES6 conduce a una alta probabilidad de que la pantalla en blanco también sea el motivo de la dependencia de paquetes de terceros, y la solución se adjunta