代码之家 › 专栏 › 技术社区 › Jiel

将Vite Vuejs应用程序部署到Apache服务器

vite vuejs3 xampp apache vue.js

1

Jiel · 技术社区 · 2 年前

我在本地机器上使用xamp-apache服务器。

我试过了 npm run preview 和 serve -s dist 。它可以访问,但必须在项目名称后面加一个端口 localhost:3000 像这样的东西。

我还尝试将dist文件夹复制到xamps-htdocs(system_name)中的另一个文件夹 system_name/dist 。我想访问 localhost/system_name 。当我尝试访问它时,它会产生白色屏幕。我已经配置 .htaccess 并双击指向js和css文件的src和href。

我的htaccess文件也是这样的。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]
RewriteCond %{REQUEST_URI} index.html$1

这是实际的文档根路径(复制dist文件的地方,index.html、assets和.htaccess)

C:/xampp/htdocs/production/

这也是index.html的内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/production/assets/denr-cdf828ad.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NGPDBS</title>
    <script type="module" crossorigin src="/production/assets/index-c66d07a1.js"></script>
    <link rel="stylesheet" href="/production/assets/index-5f93e947.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

我的vite.config.js文件如下

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  base: '/production/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

当我在浏览器上访问它时( localhost/production )它给了我白色的屏幕,但图标标志可以看到除了标题。控制台中也没有错误。

有办法做到这一点吗?

1 回复 | 直到 2 年前

1

Phil 2 年前

如果您打算在子目录下为您的应用程序提供服务,如 system_name ,您需要配置Vite以使用 Public Base Path

如果在嵌套的公共路径下部署项目,只需指定 base config option 并且所有资产路径将被相应地重写。

// vite.config.js
export default {
  base: '/production/',
};

然后,您将重建应用程序并复制/移动目录的 dist 文件夹中的相关位置。例如

cp -a dist/. /var/www/html/production/

假设您使用的是具有web历史记录的Vue路由器,您还需要配置 base 参数传递到 createWebHistory() 。。。

import { createRouter, createWebHistory } from 'vue-router'

createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    /* ... */
  ],
})