如何使用IONOS上传Vue.js搭建的个人网站？

先搞定本地打包 #

• 本地项目根目录执行 npm run build，生成dist文件夹，里面的所有文件就是上线需要的静态资源。

从IONOS后台拿连接信息 #

• 登录IONOS后台，找到你的Web托管套餐，进入对应域名的托管管理页面。
• 在「FTP访问」或「托管设置」里获取服务器地址、FTP/SFTP用户名、密码，还有端口（SFTP默认22，FTP默认21）。

上传文件到正确位置 #

• 用FTP/SFTP工具（比如FileZilla、WinSCP）连接服务器，找到网站根目录——一般是htdocs或www文件夹（后台会明确标注）。
• 把dist文件夹里的所有内容直接拖到根目录，别把整个dist文件夹传上去，不然访问域名会找不到页面。

常见坑的解决办法 #

• 访问域名出现404：IONOS默认不支持SPA路由，要配置重写规则。如果是Apache服务器，在根目录新建.htaccess文件，写入：

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>
  

  也可以在IONOS后台把404错误页面设置为/index.html。
• FTP/SFTP连不上：检查本地防火墙有没有拦截端口，或者看看IONOS后台的FTP账户是否开启，有没有设置IP白名单限制。
• 上传太慢：把dist文件夹打包成zip，用IONOS后台的「文件管理器」上传zip包，然后在线解压，比批量传文件快得多。

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