vue-cli项目打包完成后运行文件路径报错问题

本文介绍了vue-cli项目打包完成后运行文件路径报错问题，做个笔记，也分享给大家。刚新建的vue-cli项目，同事说要打包一版进行测试，打包完成后放在tomcat上发现路径报错问题。百度了一下，怀疑是build里面没有定义路径问题，度友提供了解决方案：找到config文件夹下的index.js文件，修改路径代码找到build对象，修改属性assetsPublicPath为‘./’但是由于vue-cli项目中已经没有config文件夹，需要在根目录下创建vue.config.js具体配置网上查了一下，用了一个推荐的配置： module.exports = { bas Vue CLI是一个官方提供的Vue.js开发工具，用于快速搭建Vue.js项目。它集成了很多开箱即用的功能，如构建工具、热更新、ESLint集成等。在使用Vue CLI创建的项目中，打包过程是通过webpack进行的，这涉及到资源的处理、依赖的解析以及输出目录的设定等。当您将Vue CLI打包后的应用部署到服务器，例如Tomcat，可能会遇到文件路径报错的问题。这是因为默认的配置可能并不适应所有环境，尤其是当您的应用不是部署在服务器根目录时。这个问题通常与`publicPath`或`baseUrl`的设置有关。在旧版本的Vue CLI中，解决此类问题的方式是在`config/index.js`文件中修改`assetsPublicPath`的值。然而，在新的Vue CLI版本中，这个配置被移到了`vue.config.js`文件中。如果没有这个文件，你需要在项目根目录下创建它。在`vue.config.js`文件中，你可以看到一个名为`baseUrl`的配置项，它的初始值通常是`'/'`。这个值表示静态资源的公共路径，对于本地开发通常是没问题的，但在服务器环境中，尤其是当应用不在根目录下时，可能导致找不到资源。因此，将`baseUrl`修改为`'./'`可以确保资源路径相对于当前HTML文件，从而解决路径问题。下面是一个典型的`vue.config.js`示例： ```javascript module.exports = { baseUrl: './', outputDir: 'dist', lintOnSave: true, runtimeCompiler: true, //其他配置... chainWebpack: () => {}, configureWebpack: () => {}, devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, //其他配置... }, }; ```在这个配置中，`outputDir`指定了打包后的输出目录，`lintOnSave`控制是否在保存时执行ESLint检查，`runtimeCompiler`是否启用运行时编译器（对于Vue 2.x需要，Vue 3.x默认启用）。 `devServer`配置是关于开发服务器的行为，比如端口、主机名、HTTPS设置以及代理配置等，这些在开发阶段非常重要，但与生产打包后的路径问题关系不大。当你调整了`baseUrl`为`'./'`并重新打包后，如果依然存在问题，可能需要检查其他可能影响路径的因素，比如静态资源的引用方式、HTML文件中的引用路径等。有时候，服务器配置也可能导致问题，例如Nginx或Apache的重写规则等。解决Vue CLI项目打包后的路径问题通常涉及对`vue.config.js`文件的适当配置，特别是调整`baseUrl`以匹配你的部署环境。确保正确配置后，你的应用应该能在服务器上正常运行，避免因路径错误导致的资源加载失败。如果问题仍然存在，进一步排查可能需要查看服务器日志，或检查其他可能影响路径的配置。