前端 - vue3+vite 打包生成的js把路由全返回了？

Question

项目用的 vue3+vite，包管理器 pnpm，执行 pnpm build。
生成的js为啥把路由劝返回出来了。被检测存在系统路径信息泄露，怎么解决呢

vite配置文件build部分：

build: {  assetsDir: assetsDir,  minify: 'terser',  sourcemap: false,  chunkSizeWarningLimit: 1500,  terserOptions: {    format: {      comments: false,    },  },  rollupOptions: {    output: {      entryFileNames: `${assetsDir}/[name].${appVersion}.js`,      chunkFileNames: `${assetsDir}/[name].${appVersion}.js`,      assetFileNames: `${assetsDir}/[ext]/[name].${appVersion}.[ext]`,    },  },}

build生成的js文件：

Answer 1

Vue 3和Vite在打包生成的JS中包含路由信息可能是因为Vue Router的某些配置或Vite的打包行为导致的。为了解决这个问题，你可以尝试以下几个步骤：

1. 检查Vue Router的配置：确保你的Vue Router配置中没有将路由信息暴露给全局变量或输出到最终的打包文件中。检查你的Vue Router实例化和配置，确保没有不必要的全局注册或导出。
2. 使用vue.config.js进行配置：你可以尝试在vue.config.js文件中进行配置，以优化Vite的打包行为。你可以尝试添加或修改以下配置：

module.exports = {  configureWebpack: {    optimization: {      minimize: true,      minimizer: [        new TerserPlugin({          extractComments: false, // 禁用提取注释        }),      ],    },  },};

这将禁用Terser插件的extractComments选项，从而防止在打包文件中包含注释，包括可能包含路由信息的注释。

3. 使用rollup插件：如果你使用的是Rollup作为Vite的打包工具，你可以尝试使用rollup-plugin-obfuscator等插件来混淆你的代码，以防止敏感信息泄露。这些插件可以对生成的代码进行混淆和重命名，以减少可读性并防止潜在的信息泄露。

// vite.config.jsimport obfuscator from 'rollup-plugin-obfuscator';export default {  build: {    rollupOptions: {      plugins: [        obfuscator({          // 配置混淆选项        }),      ],    },  },};

请注意，混淆代码可能会对调试和性能产生一些影响，因此请谨慎使用，并仔细评估其对你的项目的影响。

4. 更新依赖：确保你使用的Vue 3、Vite和Vue Router的版本是最新的，因为一些已知的问题可能已在新版本中得到修复。

尝试上述步骤后，重新构建你的项目并检查生成的JS文件是否仍然包含路由信息。如果问题仍然存在，请提供更多关于你的项目配置和代码的信息，以便进行更深入的分析和解决方案的提出。