非根目录下使用 Vue CLI 进行测试部署：指南和注意事项

在非根目录下使用 Vue CLI 进行测试部署

概述

在开发过程中，在非根目录下启动 vue-cli-service serve 非常有用，因为它可以帮助测试相对路径、重定向、环境变量和其他与非根部署相关的方面。本文将介绍如何在非根目录下启动 vue-cli-service serve，以及使用此设置进行测试时的注意事项。

步骤

要修改 vue-cli-service serve 的默认根 URL，需要对项目根目录中的 vue.config.js 文件进行以下修改：

module.exports = {
  // ...其他配置选项
  publicPath: '/test/',
};

修改完成后，可以通过运行以下命令在非根路径上启动 vue-cli-service serve：

vue-cli-service serve

现在，项目将托管在非根路径“/test/”上，可以开始进行测试。

注意

• 在将项目部署到生产服务器时，请务必将 vue.config.js 文件中的 publicPath 配置回 /。
• 如果遇到任何问题，请尝试清除 node_modules 文件夹并重新安装依赖项。

测试考虑因素

相对路径：

确保应用程序中的相对路径在非根部署中正常工作。例如，如果应用程序从 /images/logo.png 加载图像，请验证图像仍能正确加载。

重定向：

如果应用程序使用重定向，请测试它们在非根部署中的行为。例如，如果应用程序重定向到 /about，请验证它会正确重定向到 /test/about。

环境变量：

确保应用程序可以正确访问环境变量，即使它们是从非根路径部署的。例如，如果应用程序使用 process.env.NODE_ENV 来确定当前环境，请验证它在非根部署中仍能正确返回“development”。

结论

通过在非根目录下启动 vue-cli-service serve，可以有效地测试 Vue.js 项目的非根部署方面。了解本文介绍的步骤和注意事项，将有助于确保应用程序在不同部署场景下的正确行为。

常见问题解答

1. 为什么需要在非根目录下进行测试？

在非根目录下进行测试对于测试相对路径、重定向、环境变量等与非根部署相关的方面非常重要。

2. 如何将 vue-cli-service serve 配置为在非根路径上运行？

通过修改 vue.config.js 文件中的 publicPath 选项，可以将 vue-cli-service serve 配置为在非根路径上运行。

3. 我在非根目录下启动 vue-cli-service serve 时遇到问题。怎么办？

尝试清除 node_modules 文件夹并重新安装依赖项。如果问题仍然存在，请查看 vue-cli-service serve 日志以获取更多信息。

4. 如何测试应用程序中的相对路径？

确保应用程序中的相对路径（例如图像或其他资源的路径）在非根部署中仍然有效。

5. 如何测试应用程序中的重定向？

验证应用程序中的重定向是否在非根部署中正确工作。确保重定向指向的 URL 是正确的，并且应用程序不会陷入重定向循环。