静态部署网站解决方案

部署vue

pages服务

像gitee， github都有pages服务可以配置页面， gitee是国内目前生态最好的git托管平台，这里就先那git举例

部署准备-vue项目为例

一个开发完毕的前端项目

预览
此刻的访问：http://localhost:8080/tree， 我的本地(路由模式为history)

gitee上新建一个空项目

我在gitee上新建了一个名为antv的项目
https://gitee.com/web-kubor/antv

开始写本地配置

很简单， 我们在vue项目中，新建一个vue.config.js文件

写入vue配置文件

如果是生产环境，将静态资源的访问地址设置在自己新建的的antv的路径下，
因为gitee的pages服务会直接部署在
https://web-kubor.gitee.io/antv, 这个路径下，如果不设置，打包的文件会直接访问https://web-kubor.gitee.io/, 这个路径，这样不能取到js和css包

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/antv/'
    : '/'
}

写入路由配置

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL, //需要设置动态根目录-不设置可能会出现页面部署后白屏状况
    routes 
})

打包

会在根目录上新建一个dist文件，打完的包就在里面

yarn build

修改gitnore忽略文件

基于脚手架的默认设置，为了不将打完的包上传到代码仓库，我们一般会忽略这个文件，但是如果我们需要在托管平台上部署我们的包，就需要把这个文件上传上去

.DS_Store
node_modules
# /dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

忽略完毕后直接上传文件

查看远程仓库

如图可视，这个仓库下已经存在上传的dist的打包文件

打开服务中的gitee pages服务

将部署目录填写为dist(打包文件名)

点击启动

启动成功后就会生成一个网站

预览

https://web-kubor.gitee.io/tree