如何在Vue.js项目中添加CNAME文件以部署至根目录？

我之前也碰到过一模一样的问题，折腾了好一会儿才理顺，给你几个靠谱的解决方案：

方法一：直接把CNAME放到public目录（最简单） #

Vue CLI在打包时，会自动把public文件夹下的所有文件原封不动复制到最终的dist目录根路径下。所以你只需要：

• 在项目根目录的public文件夹里新建一个名为CNAME的文件（注意没有后缀名）
• 在文件里写入你的自定义域名，比如my-cool-app.com
• 正常执行打包和部署命令：

  npm run build
  gh-pages -d dist
  

这样部署后，gh-pages分支的根目录就会自动包含这个CNAME文件了。

方法二：通过vue.config.js配置复制文件（适合CNAME不在public的情况） #

如果你的CNAME文件放在项目根目录或者其他位置，不想放到public里，可以通过webpack的复制插件来配置：

1. 先安装copy-webpack-plugin依赖：

   npm install copy-webpack-plugin --save-dev
   

2. 在项目根目录创建或修改vue.config.js，添加以下配置：

   const CopyWebpackPlugin = require('copy-webpack-plugin');
   
   module.exports = {
     configureWebpack: {
       plugins: [
         new CopyWebpackPlugin({
           patterns: [
             { from: 'CNAME', to: 'CNAME' } // 第一个CNAME是源文件路径，第二个是目标路径
           ]
         })
       ]
     }
   }
   

3. 重新打包部署，CNAME就会被复制到dist根目录了。

方法三：用gh-pages命令直接生成CNAME（无需在项目中存放文件） #

如果你不想在项目代码里保留CNAME文件，也可以直接通过gh-pages的命令参数来自动创建：

gh-pages -d dist -c yourdomain.com

这个命令会在部署的时候，自动在gh-pages分支的根目录生成CNAME文件，并写入你指定的域名。

额外注意事项 #

• 如果你之前部署过，可能需要用gh-pages -d dist -f强制覆盖整个gh-pages分支，避免旧内容干扰
• 别忘了去GitHub仓库的「Settings > Pages」页面，确认自定义域名已经设置正确，有时候即使CNAME存在，仓库设置里的域名也需要手动匹配

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