当前位置: 首页 > 工具软件 > Wizard Form > 使用案例 >

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

焦同
2023-12-01

我使用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包添加到我的依赖项之后

 类似资料: