部署Vue/Vite应用至DigitalOcean Apache服务器遇模块解析错误求助

问题根源 #

你直接部署了开发源码而非生产构建包。npm run dev启动的是Vite开发服务器，会自动处理模块解析、热更新等逻辑；但Apache是静态文件服务器，只能识别构建后浏览器兼容的代码，无法处理未打包的ES模块引用。

解决步骤 #

1. 生成生产构建包 #

在项目根目录执行构建命令，生成可部署的dist文件夹：

npm run build

将dist文件夹内的所有文件，复制到Apache的网站根目录（通常是/var/www/html/）。

2. 配置Vite的base路径 #

修改vite.config.js，添加base配置确保资源路径正确解析：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path');

export default defineConfig({
  plugins: [vue()],
  base: './', // 新增：设置相对路径适配静态部署
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@assets': path.resolve(__dirname, './src/assets')
    }
  },
  server: {
    host: true,
    port: 4000, 
    watch: {
      usePolling: true
    }
  }
})

修改后重新执行npm run build，替换服务器上的旧构建文件。

3. 配置Apache支持SPA路由（可选但必要） #

如果你的Vue应用是单页应用（使用Vue Router），需要让Apache将所有路由请求指向index.html：

• 编辑Apache站点配置文件（如/etc/apache2/sites-available/000-default.conf），在<Directory /var/www/html>块内添加：

  FallbackResource /index.html
  

• 启用mod_rewrite模块并重启Apache：

  sudo a2enmod rewrite
  sudo systemctl restart apache2
  

4. 修复文件权限 #

确保Apache用户能读取网站文件：

sudo chown -R www-data:www-data /var/www/html
sudo chmod -R 755 /var/www/html

完成以上步骤后，刷新服务器IP即可正常访问应用。

内容的提问来源于stack exchange，提问作者Neamix