zoukankan      html  css  js  c++  java
  • 使用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目录下的文件和文件夹

     
  • 相关阅读:
    【python】虎牙直播爬虫项目
    【python】读取文件夹中所有文件名,os.walk( )
    【人工智能】使用百度api批量识别图片上的文字,进阶版
    【人工智能】使用百度api识别图片上的文字
    【python】词云图,超简单入门版
    【python】词云图,轮廓+着色,进阶版
    【python】词云图,进阶版
    【python】词云图,入门版
    【python】前程无忧51job岗位招聘信息爬虫程序,自动翻页,进阶版
    【HTML】使用百度地图api制作地图热力图,带控件,进阶版
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/6932208.html
Copyright © 2011-2022 走看看