vue项目在ie下空白

1.查看浏览器的报错,如果有html的错误,按照错误提示修改一下。

2.如果报的错误为下面图片的错误,应该就是es6的语法没有转为es5,浏览器识别不了。

解决办法

  安装: npm instatll babel-polyfill -save / yarn add babel-polyfill

  main.js最顶部引入 import ‘babel-polyfill‘

  找到webpack的入口文件,vue-cli创建的目录build/webpack.base.conf.js

  entry: {

    app: ‘./src/main.js‘

  }

  改为如图

  

{
  test: /\.js$/,
  loader: ‘babel-loader‘,
  include: [
     resolve(‘node_modules/vue-echarts‘),  //如果使用了这个组件添加上去,没使用可以不放
     resolve(‘node_modules/resize-detector‘)
   ]
},

  配置.babelrc文件

  根目录下创建.babelrc文件

{
    // 此项指明,转码的规则
    "presets": [
        // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
        ["env", { "modules": false }],
        // 下面这个是不同阶段出现的es语法,包含不同的转码插件
        "stage-2"
    ],
    // 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译
    "plugins": ["transform-runtime"],
    // 下面指的是在生成的文件中,不产生注释
    "comments": false,
    // 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
    "env": {
        // test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
        "test": {
            "presets": ["env", "stage-2"],
            // instanbul是一个用来测试转码后代码的工具
            "plugins": ["istanbul"]
        }
    }
}

  打包运行可以测试了

原文地址:https://www.cnblogs.com/wei-dong/p/12656458.html

时间: 2024-11-08 03:05:47

vue项目在ie下空白的相关文章

vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser问题

如下图所示,项目在IE11下打开报错: 因为使用了 ES6 中用来传递异步消息的的Promise,而IE浏览器都不支持. 解决方法: 第一步: 安装 babel-polyfill . babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法 $ npm install --save babel-polyfill npm WARN ajv[email protected] requires a peer of [email protected]^6.0.0 but none

vue项目打包之后页面空白解决办法

之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPublicPath 在config/index.js里面,有个 assetsPublicPath 属性,源码是'/',修改成'./',加个点 assetsPublicPath: '/',二.路由模式将histroy改成hash模式,起初 mode:'history' const router = new

vue项目windowServer nginx下部署

https://www.cnblogs.com/jiangwangxiang/p/8481661.html nginx下载地址 http://nginx.org/en/download.html 下载nginx后 ,在目录下cmd   执行 nginx.exe 在进程中查看是否启动nginx.  关闭nginx   ,也要到进程中关闭.' 2.参考  打包本地的vue项目文件,在html目录下创建文件夹zic,然后把打包好的 dist 目录下的 static文件夹和index.html放入到zi

vue项目history模式下微信分享相关问题

import wx from '@/utils/wx' import { shareApi } from '@/api' // 微信验证 export function requireConfig() { let url = window.location.href shareApi.share({ url: url }).then(res => { if (res.code === 200) { wx.config({ debug: false, appId: res.data.appid,

vue 在webpack 环境下的初始化配置

1,安装node ,可以通过node-v查看自己的node版本 2,安装vue: 通过命令行npm install vue-cli -g 进行全局安装 3,在想要创建vue项目的目录下打开命令行,输入vue init webpack进行webpack环境的初始化配置 配置过程中 如果不知道是什么意思就全部点回车就好,这里特别提一下,如果不选择npm后期会有一定的麻烦 接下来就是等待一系列的安装,这个过程稍微有点长,下载的文件总量差不多有200多M,还是需要等一会的 当现实这一步的时候就代表已经搭

vue + iview 怎样在vue项目下添加ESLint

参考:https://segmentfault.com/a/1190000012019019?utm_source=tag-newest 使用iview框架的MenuGroup标签,vscode报红,提示如下 [eslint-plugin-vue] [vue/no-parsing-error] Parsing error:x-invalid-end-tag 这个时候,把MenuGroup标签改成menu-item标签 还有问题,继续往下看 在vue的项目里新添加ESLint 有的时候,早期的时候

vue项目,ES6,IE下语法错误的情况解决办法,兼容IE9+

摘要:前文:CSDN也发布了相同文章:https://blog.csdn.net/qq_41797950/article/details/104476068 问题: vue项目,IE浏览器不兼容ES6语法,在ie10,报错 语法错误:在ie9报错:缺少’‘:’ 每个人项目不同,报错也不同 解决: 1. 下载插件,babel-polyfill npm install babel-polyfill 2. build/webpack.base.conf.js下的entry下的app添加 'babel-

vue项目如何打包扔向服务器

当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上.   如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助.地址链接:vue-cli 如何打包上线   先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404. 2.打包好的静态资源

Vue项目webpack打包部署到服务器

Vue项目webpack打包部署到服务器 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.[js](http://lib.csdn.net/base/javascript "JavaScript知识库"),我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run buil