vue-cli4 打包配置 部署到github

一、 配置打包

根目录下添加vue.config.js 自定义相关配置,文件位置名字什么的根据自己喜欢配置，构建大型项目的时候可能需要，自己写着玩的就随便啦，不配置也没有问题。

最主要的还是参考官方文档！

（官方文档永远的神！！！）

配置参考 | Vue CLI🛠️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/config/

// vue.config.js

let version = "";
(function () {
  const d = new Date();
  const yy = d.getFullYear().toString().slice(2);
  const MM =
    d.getMonth() + 1 >= 10 ? d.getMonth() + 1 : "0" + (d.getMonth() + 1);
  const DD = d.getDate() >= 10 ? d.getDate() : "0" + d.getDate();
  const h = d.getHours() >= 10 ? d.getHours() : "0" + d.getHours();
  const mm = d.getMinutes() >= 10 ? d.getMinutes() : "0" + d.getMinutes();
  version = yy + MM + DD + h + mm;
  return version;
})();

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/vue3_Ts/" : "/",
  outputDir: `./dist`, //生成打包文件的目录 （会清除上一次的文件）
  assetsDir: `./${version}`, //打包编译后的静态资源所在的目录位置
  indexPath: "index.html", //生成的index.html 文件所在的位置
  filenameHashing: true, //静态文件文件名哈希
};

二、打包部署

1、在  vue.config.js  中设置正确的  publicPath  。

      就像上面那样配置，以为你 打包项目的时候 会把 process.env.NODE_RNV 修 改成  production 

        然后你部署的时候就没办在路径上指定自己的仓库，

2、然后在项目的根目录上添加文件  deploy.sh  

#!/usr/bin/env sh

3、进行打包编译项目 npm run build 

        # 打包 npm run build 

        # cd  dist  // 进入到你的打包生成的文件夹中

        # git add -A

        # git commit -m 'deploy'

        # git push -f 你的github仓库地址  想要部署分支:gh-pages

然后就OK了你就可以去github仓库上找你 部署仓库 路径了，就可以愉快的玩耍了
部署 | Vue CLIhttps://cli.vuejs.org/zh/guide/deployment.html#%E4%BA%91%E5%BC%80%E5%8F%91-cloudbase