vue转es5html,使用vue-form-wizard的Vue CLI Webpack模板不会转换为es5

作者在使用vue-cli的webpack简单模板构建项目时遇到了IE11兼容性问题,主要是由于Promise未被正确转译。通过更新webpack配置,引入babel-polyfill并在main.js中导入,解决了这个问题。这涉及到Vue.js、ES6转译和浏览器兼容性问题。
摘要由CSDN通过智能技术生成

我使用vue-cli webpack(简单)模板开始了一个项目 .

当我尝试使用 npm run build 构建发布时,我得到了我的dist文件夹,其中包含预期的build.js等 . 在测试构建版本时,该应用程序适用于除IE(11)之外的所有浏览器 .

IE中的错误引用了Promise,所以我查看了dist.js文件并看到了 new Promise() 语法 . 我对vue-loader和babel不是很熟悉,但是当我运行build命令时,我认为所有es6代码都会被转换为es5 .

我没有使用vue-cli webpack模板修改webpack.config.js .

我的期望是关于翻译的错误还是我错过了什么?

.babelrc

{

"presets": [

["env", { "modules": false }],

"stage-3"

]

}

webpack.config.js

var path = require('path')

var webpack = require('webpack')

module.exports = {

entry: './src/main.js',

output: {

path: path.resolve(__dirname, './dist'),

publicPath: '/dist/',

filename: 'build.js'

},

module: {

rules: [

{

test: /\.css$/,

use: [

'vue-style-loader',

'css-loader'

],

}, {

test: /\.vue$/,

loader: 'vue-loader',

options: {

loaders: {

}

// other vue-loader options go here

}

},

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},

{

test: /\.(png|jpg|gif|svg)$/,

loader: 'file-loader',

options: {

name: '[name].[ext]?[hash]'

}

}

]

},

resolve: {

alias: {

'vue$': 'vue/dist/vue.esm.js'

},

extensions: ['*', '.js', '.vue', '.json']

},

devServer: {

historyApiFallback: true,

noInfo: true,

overlay: true

},

performance: {

hints: false

},

devtool: '#eval-source-map'

}

if (process.env.NODE_ENV === 'production') {

module.exports.devtool = '#source-map'

// http://vue-loader.vuejs.org/en/workflow/production.html

module.exports.plugins = (module.exports.plugins || []).concat([

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: '"production"'

}

}),

new webpack.optimize.UglifyJsPlugin({

sourceMap: true,

compress: {

warnings: false

}

}),

new webpack.LoaderOptionsPlugin({

minimize: true

})

])

}

node - 6.9.2 | npm - 3.10.2 | vue - 2.9.2

Update 1/3/18

通过更改我在webpack.config.js文件中的'entry'prop,我可以通过babel-polyfill回答和更多搜索来获得 生产环境 构建(npm run build)的工作

entry: ['babel-polyfill', './src/main.js']

并将babel-polyfill import语句添加到我的main.js中

import 'babel-polyfill'

将babel-loader和babel-polyfill npm包添加到我的依赖项之后

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值