Vue CLI构建路径错误，快速搞定！

Vue CLI构建路径错误，快速搞定！

引用

CSDN

等

9

来源

1.

https://blog.csdn.net/qq_54039576/article/details/139667780

2.

https://blog.csdn.net/weixin_53955862/article/details/137440584

3.

https://cloud.baidu.com/article/3320964

4.

https://blog.csdn.net/armanted/article/details/145027631

5.

https://blog.csdn.net/geng1025/article/details/142809802

6.

https://blog.csdn.net/2501_90229237/article/details/145128669

7.

https://cli.vuejs.ac.cn/config/

8.

https://cli.vuejs.ac.cn/migrations/migrate-from-v4

9.

https://www.cnblogs.com/j-a-h/p/18084502

在Vue CLI项目中，构建路径错误常常令人头疼。本文将从publicPath配置、常见错误排查到最佳实践，全方位解析Vue CLI构建路径问题，帮助你轻松应对这一技术挑战。

在Vue CLI中，publicPath是一个非常重要的配置项，它决定了应用程序包的部署基础URL。这个配置项等同于Webpack中的output.publicPath，但Vue CLI需要这个值用于其他目的，因此你应该始终使用publicPath而不是修改Webpack的output.publicPath。

默认配置

默认情况下，Vue CLI假设你的应用程序将部署在域的根目录下，例如https://www.my-app.com/。如果你的应用程序部署在子路径下，则需要使用publicPath指定该子路径。例如，如果你的应用程序部署在https://www.foobar.com/my-app/，则将publicPath设置为'/my-app/'。

动态配置

在开发和生产环境中，你可能需要不同的publicPath配置。你可以使用条件判断来实现：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

相对路径配置

publicPath也可以设置为空字符串('')或相对路径(./)，这样所有资产都使用相对路径链接。这允许构建的包部署在任何公共路径下，或用于基于文件系统的环境，例如Cordova混合应用程序。

但是，相对publicPath有一些限制，应避免在以下情况下使用：

• 你正在使用HTML5 history.pushState路由；
• 你正在使用pages选项来构建多页面应用程序。

当遇到构建路径错误时，可以按照以下步骤进行排查：

1. 清理缓存

有时候，构建路径错误可能是由于缓存问题引起的。你可以尝试删除node_modules目录下的.cache文件夹，或者使用IDE的清理缓存功能。

2. 检查路径配置

确保你的publicPath配置正确。如果你的应用程序部署在子路径下，需要正确设置publicPath。同时，检查你的package.json中的scripts命令是否正确：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
}

3. 版本兼容性

确保你的Vue CLI版本一致。全局和本地Vue CLI版本不一致可能导致构建错误。使用以下命令检查版本：

vue --version
npx vue --version

如果版本不一致，可以通过以下命令更新：

npm install -g @vue/cli

1. 始终使用publicPath：不要直接修改Webpack的output.publicPath，这可能导致其他配置问题。

2. 合理设置outputDir：outputDir用于指定构建输出目录，默认为dist。确保这个目录在构建前是空的，或者使用--no-clean参数来保留目录内容。

3. 注意相对路径限制：如果你使用相对路径作为publicPath，要确保你的应用不依赖于HTML5路由或多页面配置。

4. 检查环境变量：在生产环境中，确保你的环境变量配置正确，特别是NODE_ENV变量。

5. 升级Vue CLI：确保你使用的是最新版本的Vue CLI，这可以避免很多已知问题。Vue CLI已经升级到Webpack 5，不再支持Node.js 8-11和NPM 5。

通过以上内容，相信你已经掌握了Vue CLI构建路径的相关知识。在实际开发中，合理配置publicPath和相关选项，可以有效避免构建路径错误，让你的Vue项目顺利上线。