正文
使用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目录下的文件和文件夹
