时间: 2024-05-28 14:09:07 浏览: 175

Vue项目服务器部署之子目录部署方法

Vue项目的服务器部署是一个重要的环节，尤其当需要在子目录下运行时，需要进行特定的配置。这篇文章主要讨论了如何在子目录下部署Vue项目，主要针对使用Poi框架的情况。 Poi是一个免配置的前端开发框架，它对webpack进行了封装，使得开发者无需手动配置webpack就能开始开发。Poi允许我们在`package.json`或`poi.config.js`文件中进行项目配置。通过运行`npm run dev`启动开发服务器，`npm run dist`则用于打包项目。在打包过程中，`static`目录下的静态资源会被复制到`dist`目录，同时JS和CSS会被压缩并自动注入到`index.html`中。当需要将Vue项目部署到子目录时，有以下几个关键步骤： 1. **设置homepage**：在`poi.config.js`或`package.json`中，需要将`homepage`字段设置为子目录的路径。例如，如果子目录是`/ticket/`，那么`homepage`应设为`"/ticket"`。 2. **更新HTML引用**：`index.html`中的所有外部资源（非Vue生成的资源）需要添加子目录前缀。这包括favicon和其他静态资源。例如，如果图标原本的引用是`<link rel="icon" href="favicon.ico">`，那么应该更改为`<link rel="icon" href="/ticket/favicon.ico">`。 3. **相对路径的CSS资源**：确保CSS文件中的背景图片和其他资源路径为相对路径，而不是绝对路径。这样，它们在子目录中也能正确引用。 4. **配置Vue Router**：Vue Router的`base`选项也需要设置为子目录。如：`router.base = '/ticket/'`，这将确保路由的解析以子目录为起点。完成以上步骤后，可以执行`npm run dist`进行打包。然后，需要在服务器端配置Nginx来支持子目录部署。以下是一个示例Nginx配置： ```nginx location /ticket { alias /root/java/ticket/dist/; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^/(ticket|sign|reimburse)/(.+)$ /$1/index.html last; } ``` 这里的`location /ticket`定义了请求映射到服务器上的实际目录，`alias`指令用于指定目录。`try_files`则尝试匹配请求的文件或目录。`location @rewrites`是一个命名location，用于处理重写规则。`rewrite`指令将URL路径重定向到对应的`index.html`，以便Vue Router能够处理路由。需要注意的是，`^/(ticket|sign|reimburse)`这一部分可以根据实际情况进行调整。如果只有一个子目录，只需要保留`^/(ticket)/(.+)$`即可，并确保`ticket`被括号包围。按照以上步骤操作，Vue项目就可以成功部署到服务器的子目录下了，用户可以通过子目录访问并正常使用应用。这个过程涉及到Vue项目构建、Poi配置以及Nginx的设置，每个环节都至关重要，只有正确配置才能确保项目的正常运行。

你可以在 Vue 项目的根目录下创建一个 vue.config.js 文件，然后在文件中配置相关的目录信息。例如，可以使用 "publicPath" 属性指定项目的根路径，使用 "outputDir" 属性指定项目的输出目录，使用 "assetsDir" 属性指定静态资源的目录等等。具体的配置方式可以参考 Vue 官方文档。

阅读全文

如何目录配置为 Vue 项目的根目录

相关推荐

如何目录配置为 Vue 项目的根目录

相关推荐

详解Vue项目编译后部署在非网站根目录的解决方案

解决vue项目nginx部署到非根目录下刷新空白的问题

vue项目根目录一般是哪个

在部署Vue项目至Nginx服务器的非根目录时，如何正确配置Nginx以及Vue项目相关设置，以避免页面刷新时出现404空白页面的问题？

在vue项目中想要指定开发环境的配置，需要在根目录下的（）文件进行配置

创建多个Vue2项目：在Vue2项目的根目录中，创建多个Vue2项目，例如pc和mobile项目。

解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

often 常用文件配置 vue相关项目情况

一个vue项目的webpack配置过程

手把手教你webpack配置vue项目

Vue项目搭建：Webpack配置全攻略

Vue项目解决跨域问题的配置教程

jsp页面中使用iframe嵌入了vue页面，我能否把vue页面的根目录设为单独开发vue时的根目录，而不是jsp的根目录

在将Vue项目部署到Nginx服务器的非根目录下时，如何通过Nginx配置以及项目本身设置解决页面刷新导致的404空白问题？

vue项目路由配置的@

从根目录下引入vue文件会报错

vue打包的项目如何嵌套到根目录下

vue3项目打包配置

Proteus 8 Professional.zip

最新推荐

浅谈Visual Studio 2019 Vue项目的目录结构

使用IDEA工具配置和运行vue项目及遇到的坑

Vue-cli3项目配置Vue.config.js实战记录

vue-cli3项目配置eslint代码规范的完整步骤

nginx部署多个vue项目的方法示例

新代数控API接口实现CNC数据采集技术解析

管理建模和仿真的文件

MapReduce数据读取艺术：输入对象的高效使用秘籍

如何在Win10系统中通过网线使用命令行工具配置树莓派的网络并测试连接？请提供详细步骤。

Java版Window任务管理器的设计与实现