使用webpack搭建vue项目中遇到的问题
1:data数据文件经试验,需要放在生成的build文件夹中才能生效,但是应该把data文件夹先放在src中,然后如何定义config文件,让其复制过去?
new CopyWebpackPlugin([ { from: path.join(__dirname, "./src/css/i"), to: path.join(__dirname, "./build/exploit/mplus/"+config.version+"/css/i") }, { from: path.join(__dirname, "./src/js/lib"), to: path.join(__dirname, "./build/exploit/mplus/"+config.version+"/js/lib") }, { from: path.join(__dirname, "./src/js/data"), to: path.join(__dirname, "./build/exploit/mplus/"+config.version+"/js/data") } ])
2:对于常用的子组件在webpack中方式:(子组件改变父组件中的数据,原来是vm.data='',现在改为webpack怎么办?只能用emit?)
首先是父组件中的形式:
<template>
<h5>{{ceshidare}}</h5> <ceshi v-on:event2="event3"></ceshi> </template> <script> var jDialog = require('./j-dialog.vue');//引入j-dialog组件 export default { name: 'app',//感觉没啥用 data: function() { return { url: { getFloorConf: '/products/getFloorConf',//定义url链接 }, loadingShow: true,//定义data数据 } }, components: { 'j-dialog': jDialog //定义组件,在html中使用<j-dialog></j-dialog> },
methods: {
event3:function(){
this.ceshidare='yang';
}
}
}
</script>
子组件的形式:
<template> <div><button v-on:click="event">点击我</button></div> </template> <script> export default{ name : 'ceshi', methods:{ event:function(){ this.$emit('event2'); } } } </script>
3:使用npm install命令安装后,在用npm run build 然后把html放进生成的build文件夹中,最后执行npm run dev命令,本地调试
首先设置package.json文件,设置dev命令:
"scripts": { "dev": "cross-env NODE_ENV=development webpack --progress --bail --colors --hide-modules && webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --hide-modules" }
其中cross-env NODE_ENV=development是设置环境变量,执行webpack命令生成build文件
webpack --progress --bail --colors --hide-modules
然后执行热更新:webpack-dev-server --open --hot
if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ LOCAL_URL: JSON.stringify("")//根据执行的环境变量不同,设置接口的前缀为空 }), new webpack.optimize.UglifyJsPlugin({ //压缩js代码 sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({//压缩css代码 minimize: true }) ]) }else if(process.env.NODE_ENV === 'development'){ module.exports.devtool = '#source-map' module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ LOCAL_URL: JSON.stringify("//plus.m.jd.com")//根据执行的环境变量不同,设置接口的前缀为域名 }), new webpack.LoaderOptionsPlugin({//压缩js代码 minimize: false }), new CleanWebpackPlugin(['build'])//因为在package.json文件中执行了两次webpack,所以在第一执行package的时候清除之前生成的文件夹 //在第二次执行的webpack-dev-server没有配置环境变量,所以执行下面的else 不再清除生成的build文件夹,因为新的文件夹已经被占用 ]) }else{ module.exports.devtool = '#source-map' module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ LOCAL_URL: JSON.stringify("//plus.m.jd.com") }), new webpack.LoaderOptionsPlugin({ minimize: false }) ]) }
对应的js可以获取到定义的全局变量:
url: { getFloorConf: LOCAL_URL+'/products/getFloorConf', }
4:不自动打开index,而是打开html文件夹,在devServer中配置:contentBase: path.join(__dirname, 'build'),:
在build文件夹中去加载index.html,如果没有index.html文件,将会在浏览器中显示所有build目录下的文件和文件夹