如何通过虚拟主机服务部署SvelteKit并生成可上传的打包文件？

针对你的情况，SvelteKit需要通过配置静态适配器来生成可直接上传的静态文件，步骤如下：

• 安装静态适配器
  首先安装适配静态部署的插件：

  npm install @sveltejs/adapter-static --save-dev
  

• 修改SvelteKit配置文件
  打开svelte.config.js，替换默认适配器为静态适配器，并添加关键配置确保路由正常工作：

  import adapter from '@sveltejs/adapter-static';
  
  /** @type {import('@sveltejs/kit').Config} */
  const config = {
  	kit: {
  		adapter: adapter({
  			pages: 'build',
  			assets: 'build',
  			fallback: 'index.html' // 让所有路由请求回退到index.html，适配客户端路由
  		}),
  		prerender: {
  			default: true // 预渲染所有页面为静态HTML
  		},
  		trailingSlash: 'always' // 根据主机需求调整，确保路由匹配
  	}
  };
  
  export default config;
  

• 生成静态打包文件
  执行build命令，SvelteKit会在build目录生成包含index.html的完整静态文件：

  npm run build
  

• 上传到虚拟主机
  将build目录下的所有文件，通过FTP上传到你的虚拟主机根目录/httpdocs。

• 更新.htaccess文件
  替换原有的规则，确保所有非文件/目录的请求都指向index.html，让SvelteKit处理客户端路由：

  RewriteEngine on
  RewriteBase /
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(.*)$ /index.html [NC,L]
  

补充说明 #

• 如果你的虚拟主机对路由尾部斜杠有要求，可以调整svelte.config.js中的trailingSlash选项，可选值为always、never或ignore。
• fallback: 'index.html'是核心配置，确保访问直接路由（比如/about）时能正确加载应用并处理路由。

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