问题

今天vuecli3打包完之后，线上访问页面报错：无法重新定义属性：$router ，错误如下：

在这里插入图片描述

原因以及解决方式

https://stackoverflow.com/questions/52209717/vuejs-uncaught-typeerror-cannot-redefine-property-router

报这个错误的原因就是多次引入了 vue-router，我的 tpl.html 添加了cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <% if (NODE_ENV === 'production') { %>
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
    <% } %>
  </body>
</html>

然后 vue.config.js 配置如下：

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "/kaimo/" : "/kaimo",
    // 将构建好的文件输出到哪里
    outputDir: "kaimo",
    pages: {
        index: {
            entry: "src/main.js",
            template: "src/tpl.html",
            filename: "index.html",
            title: "测试页面",
            chunks: ["chunk-vendors", "chunk-common", "index"]
        },
    },
    // 生产环境下的sourceMap
    productionSourceMap: false,
    chainWebpack: config => {
        
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            config.optimization.minimizer = [
                new UglifyJsPlugin({
                    sourceMap: false,
                    uglifyOptions: {
                        output: {
                            comments: true, // 删除注释
                        },
                        warnings: false,
                        compress: {
                            drop_console: true,
                            drop_debugger: true, // 删除debugger
                            pure_funcs: ["console.log"],
                        }
                    }
                })
            ];
        }
    }
};

我们可以看到 vue-router 打包到 bundle 中了，然后我又加了cdn，这样就会多了一次。

在这里插入图片描述

我们可以在 vue.config.js 中配置 externals，或者去掉 cdn 的引入，直接用打包的。下面讲一下配置 externals 的方式。

externals 它配置项提供了阻止将某些 import 的包打包到 bundle 中的功能，在运行时再从外部获取这些扩展依赖。

 config.externals({
    key: value
});
  • key：是第三方依赖库的名称
  • value：值可以是字符串、数组、对象。CDN引入的 js 文件赋值给window的全局变量名称。

这里我们配置忽略打包文件：

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "/kaimo/" : "/kaimo",
    // 将构建好的文件输出到哪里
    outputDir: "kaimo",
    pages: {
        index: {
            entry: "src/main.js",
            template: "src/tpl.html",
            filename: "index.html",
            title: "测试页面",
            chunks: ["chunk-vendors", "chunk-common", "index"]
        },
    },
    // 生产环境下的sourceMap
    productionSourceMap: true,
    chainWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            // 忽略的打包文件
             config.externals({
                 "vue": "Vue",
                 "vue-router": "VueRouter"
             });
         }
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            config.optimization.minimizer = [
                new UglifyJsPlugin({
                    sourceMap: true,
                    uglifyOptions: {
                        output: {
                            comments: true, // 删除注释
                        },
                        warnings: false,
                        compress: {
                            drop_console: true,
                            drop_debugger: true, // 删除debugger
                            pure_funcs: ["console.log"],
                        }
                    }
                })
            ];
        }
    }
};

这个样我们就不会报错了。

Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局