将vite+vue3项目打包并部署到本地的tomcat服务器

vite版本:vite v3.2.2

Vue3版本:

 1)修改vite.config.js文件

修改内容如下

export default defineConfig({
 /**
   * 在生产中服务时的基本公共路径。
   * @default '/'
   */
  base: '/项目名/',
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

 2)在项目路径下将项目打包  

npm run build

3)将打包好的dist文件复制到Tomcat webapps文件夹下,重命名为vite.config.js中配置号的项目名

 注意事项:

1)不配置vite.config.js中的base,index,html会获取不到资源,因为路径不正确。

 2)可以不配置路由,https://www.jianshu.com/p/7b5573d60ac1中提到修改路由配置,但是实测配置与否,路由都能正常访问。也就是说本地访问报错,大概率与路由没什么关系。

 

<think>好的,我现在需要解决用户的问题,即如何在使用 Vue 3Vite 打包后实现自动部署。用户希望得到配置教程,所以我得整理相关的步骤和方法。 首先,用户提到了Vue 3Vite,所以应该基于这两个技术栈。自动部署通常涉及打包后自动将生成的文件部署服务器或者托管平台,比如GitHub Pages、Tomcat或者自己的服务器。根据用户提供的引用内容,他们可能对GitHub Pages和Tomcat部署有特别的兴趣,因为引用[2]和[4]提到了这些。 接下来,我需要考虑用户可能的部署目标。引用[2]讨论了vite+vue3Tomcat本地部署,指出如果使用history模式,需要调整路由配置。而引用[4]则提到了部署到GitHub Pages的方法,需要配置项目的base路径和仓库设置。因此,我应该涵盖这两种情况的自动部署配置。 然后,自动部署通常需要CI/CD工具,比如GitHub Actions。用户可能希望每次推送到代码仓库后自动触发构建和部署流程。我需要详细说明如何设置GitHub Actions的工作流程文件,包括安装依赖、打包部署到GitHub Pages的步骤。 此外,需要注意项目中的配置,比如vite.config.js中的base设置,这在引用[3]和[4]中都有提到,特别是部署到子目录时需要正确设置base路径。路由器的history模式配置也需要调整,如引用[2]所述,使用createWebHistory(&#39;项目名&#39;),确保在部署到子路径时路由正常。 可能还需要考虑部署到其他平台,比如自己的服务器,这时候可能需要使用SSH连接和rsync命令,或者使用SCP将dist目录上传。这部分用户虽然没有直接提到,但作为教程应该覆盖常见场景。 最后,生成相关问题时要围绕部署配置、优化步骤、不同环境的差异以及常见错误处理,这样用户能进一步探索相关主题。 总结步骤应该是:安装配置ViteVue Router,调整项目配置,配置自动化部署脚本或CI/CD流程,处理不同部署目标的具体设置,最后验证部署结果。需要确保每个步骤都清晰,引用提供的资料中的正确部分,比如引用[2]和[4]中的配置项。</think>### Vue 3 + Vite 打包后自动部署配置教程 以下是实现自动部署的详细步骤,涵盖本地服务器和 GitHub Pages 两种场景: --- #### **一、基础项目配置** 1. **安装依赖** 确保项目中已正确配置 Vue Router 和 Vite: ```bash npm install vue-router@4 # 安装 Vue 3 兼容的路由 [^1] ``` 2. **配置路由模式** 如果使用 history 模式,需在路由配置中指定基础路径: ```javascript // router/index.js import { createWebHistory } from &#39;vue-router&#39;; export default createRouter({ history: createWebHistory(&#39;/your-project-name/&#39;), // 适配子目录部署 [^2] routes: [...] }); ``` 3. **修改 Vite 配置** 在 `vite.config.js` 中设置 `base` 路径(关键步骤): ```javascript // vite.config.js export default defineConfig({ base: process.env.NODE_ENV === &#39;production&#39; ? &#39;/your-project-name/&#39; : &#39;./&#39;, // 静态资源路径适配 [^3][^4] // 其他配置... }); ``` --- #### **二、自动化部署到 GitHub Pages** 1. **生成部署脚本** 在 `package.json` 中添加部署命令: ```json { "scripts": { "deploy": "npm run build && gh-pages -d dist" } } ``` 2. **安装 gh-pages 工具** ```bash npm install gh-pages --save-dev ``` 3. **配置 GitHub Actions** 创建 `.github/workflows/deploy.yml` 文件: ```yaml name: Deploy to GitHub Pages on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 - run: npm install - run: npm run build - uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist ``` 4. **启用 GitHub Pages** 在仓库 Settings → Pages 中,选择 `gh-pages` 分支作为源 [^4]。 --- #### **三、部署Tomcat 服务器** 1. **打包配置** 确保 `vite.config.js` 的 `base` 设置为相对路径: ```javascript base: &#39;./&#39; // 静态资源使用相对路径 ``` 2. **自动化脚本示例** 使用 Shell 脚本完成构建 + 上传: ```bash #!/bin/bash npm run build scp -r dist/* user@yourserver:/path/to/tomcat/webapps/your-project/ ``` 3. **路由适配** 若使用 Tomcat 子目录部署,需同步修改路由配置中的基础路径: ```javascript history: createWebHistory(&#39;/tomcat-app-context/&#39;) // 与服务器上下文路径一致 ``` --- #### **四、验证部署** 1. **本地测试** 运行本地服务器验证打包结果: ```bash npm run preview # Vite 内置预览功能 ``` 2. **常见错误处理** - **404 错误**:检查路由模式和 `base` 配置是否匹配部署路径 [^4] - **资源加载失败**:确认 `vite.config.js` 中 `base` 是否为正确的相对路径或子目录路径 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值