如何在Vue单页应用中添加.txt文件实现线上路径直接访问

核心逻辑就是把.txt文件放到项目约定的不做编译、原封不动输出到打包根目录的静态资源文件夹，再配合简单的服务器规则避免路由拦截即可，以下是不同场景的具体操作：

Vite 创建的 Vue 3/Vue 2 项目（当前主流脚手架） #

• 找到项目根目录下的public文件夹，这是Vite内置约定的纯静态资源目录，打包时会直接把目录内所有文件按原结构复制到最终产物dist的根路径，不会做任何代码编译、文件名哈希处理
• 直接把需要对外访问的sitemap.txt扔进这个public文件夹即可，不需要修改任何前端路由配置
• 本地开发时直接访问http://localhost:你的启动端口/sitemap.txt就能看到文件内容，执行npm run build打包后，检查dist根目录能直接看到sitemap.txt，部署上线后自然可以通过myvuewebsite.com/sitemap.txt直接访问

避坑提醒：别把txt文件放到src/assets目录下，这个目录的资源会被Vite当作模块做编译处理，最终不会按原文件名、原路径输出到站点根目录，访问会404

老版本 Vue CLI（Webpack 构建）项目 #

• Vue CLI 3.x 及以上版本，项目根目录同样存在public静态文件夹，操作和Vite项目完全一致，把txt文件放进去就行
• 更早期的Vue CLI 2.x版本，静态目录是根目录下的static文件夹，把txt文件放进这个目录，打包后会自动输出到dist根路径

History 路由模式的额外配置 #

如果你的项目开了HTML5 History路由模式（也就是url不带#的那种），需要注意两点：

• 前端路由表不要给.txt后缀的路径配置任何路由规则，避免请求被前端路由拦截，当成页面组件渲染
• 服务器配置要加静态文件匹配规则，遇到.txt后缀的请求直接返回对应文件，不要统一fallback到index.html
  以最常用的Nginx为例，在站点对应的server配置块里加如下规则即可：

  location ~* \.txt$ {
    root /你的站点实际部署的dist目录绝对路径;
    try_files $uri =404;
  }
  

  这段规则的作用是：所有后缀为.txt的请求，直接去站点目录下找对应文件，找到就返回，找不到返回404，不会走到Vue应用的入口文件
• 如果是部署在虚拟主机、OSS对象存储、Serverless静态站点托管平台，不需要额外写配置，只需要把sitemap.txt和dist目录下的其他文件一起上传到站点根目录，平台默认会对静态后缀的请求直接返回文件，不会触发路由重写规则

上线前验证方法 #

打包完成后可以本地先测一遍，避免上线出问题：

1. 全局安装静态文件服务：执行命令npm install -g serve
2. 终端进入打包生成的dist目录，执行serve启动本地静态服务
3. 访问服务提示的本地地址拼接/sitemap.txt，如果能正常显示txt文件内容，就说明配置正确，直接部署即可

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