当前位置：文江博客话题详情

vue2项目 webpack 打包后的代码重复

发布于 2022-09-11 15:21:06 字数 3093 浏览 23 评论 0

找到问题了, vux 官方模板的问题

在 vux 下找到了 issues
https://github.com/airyland/v...
不过暂无解决办法

项目描述

项目是移动端 vue2 项目, 采用 vux 作为 ui 框架, 使用 vux 官方模板创建
使用了 vue-router, vuex
webpack 版本为 3.6+

问题描述

期初是发现在根组件 App.vue 的 export default 上面写 console.log 会输出2遍
然后打包, 查看打包后的代码, 发现了很奇怪的问题

App.vue 中部分代码如下图

打包好的 app.js 中部分代码如下图

发现这句 console.log 在打包后的文件中出现了2遍
而且 computed 跟 methods 中的代码也出现了2遍

我在自己另一个PC端的 vue2 + element-ui 项目, 是 webpack2的, 试了下并没有相同的问题

不知道是 webpack3 哪里配置有问题还是什么情况

最小化代码测试

删除了所有页面业务逻辑代码, 还是有问题, 感觉是 webpack 配置有问题, 跟写的页面代码关系不大
App.vue

<template>
  <div class="mc-app" style="height:100%;">
  已打开页面
  </div>
</template>

<script>
console.log('enter')
export default {
  components: {},
  data() {
    return {
    }
  }
}
</script>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  render: h => h(App)
}).$mount('#app-box')

build后生成的app.js

webpackJsonp([1], {
    NHnr: function(n, e, t) {
        "use strict";
        Object.defineProperty(e, "__esModule", {
            value: !0
        });
        var r = t("IvJb");
        console.log("enter");
        console.log("enter");
        var o = {
            components: {},
            data: function() {
                return {}
            }
        },
        c = function() {
            var n = this,
            e = n.$createElement;
            return (n._self._c || e)("div", {
                staticClass: "mc-app",
                staticStyle: {
                    height: "100%"
                }
            },
            [n._v("\n已打开页面\n")])
        },
        a = [],
        l = {
            render: c,
            staticRenderFns: a
        },
        s = l,
        i = t("C7Lr"),
        u = i(o, s, !1, null, null, null),
        p = u.exports;
        r.a.config.productionTip = !1,
        new r.a({
            render: function(n) {
                return n(p)
            }
        }).$mount("#app-box")
    }
},
["NHnr"]);
//# sourceMappingURL=app.f04b99a5a5fe2fad1bb2.js.map