【笔记】Vue3 CLI项目连同dist文件夹上传到GitHub

1.在GitHub上新建Git仓库

2.关联本地仓库与远程仓库，假设远程仓库的URL为`git@github.com:username/repository.git`

关联命令：

git remote add origin git@github.com:username/repository.git

3.使用Vue CLI创建的项目文件根目录下会有.git文件夹与.gitignore文件,用于指定Git不需要跟踪的文件或文件夹。 这样，Vue项目中的`node_modules`文件夹和`dist`文件夹将不会被Git跟踪。

4.用 vue-cli 创建的项目，项目目录中没有 config 文件夹，所以我们需要自建一个配置文件；在根目录 src 下创建文件 vue.config.js，需注意文件名称必须是 vue.config.js，然后在文件中插入以下代码：

//打包配置文件
module.exports = {
  assetsDir: 'static',
  parallel: false,
  publicPath: './',
};

5.使用打包工具（此处使用WebPack）将项目打包，生成dist文件夹

npm run build

打包完成后，会在项目根目录生成一个`dist`文件夹，其中包含了打包后的文件。

6.添加更改、提交到本地仓库

进入项目根目录，使用以下命令将dist文件夹中的更改添加到Git的暂存区

git add dist -f

然后使用以下命令将暂存区的更改提交到本地仓库并添加提交信息

git commit -m "Add dist"

7.推送到远程仓库

直接运行github新建仓库时Quick SetUp中的…or push an existing repository from the command line命令即可

git remote add origin git@username/repository.git
git branch -M main
git push -u origin main

8.在其他设备上使用

其他开发人员或者在其他设备上使用项目时，可以通过以下步骤克隆Git仓库并下dist文件夹：

git clone git@github.com:username/repository.git

然后使用dist文件夹中的文件进行项目开发或部署。