首页> web前端> Vue.js> 正文

手动纯静态文件打包部署预览链接(部署到GitHub),来自于vue的cli官方文件,使用的是yarn

大佬别动我昵称
发布: 2021-11-15 16:37:23
原创
103 人浏览过

写完项目后,需要部署和发布,这个使用vue@cli搭建的项目,只有前端的静态文件,调用后端的接口,并且是部署到GitHub的话可以使用这个步骤。

注意的点:1,你的gitbash是安装切配置好了的

2,每修改一次代码都需要从新push到生产环境里

3,这是手动更新的步骤,也是可以自动更新,需要另外的配置

会有两个环境,所以要建两个仓库,一个是放代码的环境,一个是生产环境,代码环境的代码改变就需要bulid,会产生一个新的生产换行,然后会push到存放生产环境的仓库,

1,命令行

``` yarn build

```

2.

点链接,语言切换成中文

![build成功后的链接](https://img.php.cn/upload/image/421/242/536/1636642339926184.png "build成功后的链接")

用一个东西监听生成的dist目录

~~~

yarn global add serve

serve -s dist

//这两行是确保dist目录打包好了

~~~

安装好后,网页端口变成5000多,打包文件会被压缩,

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

~~~

module.exports = {

publicPath: process.env.NODE_ENV === 'production'

? '/my-project/' //生产环境的名称

: '/' //

}

~~~

4.在项目里建deploy.sh文件

~~~

#!/usr/bin/env sh

# 当发生错误时中止脚本

set -e

# 构建

npm run build

# cd 到构建输出的目录下

cd dist

# 部署到自定义域域名

# echo 'www.example.com' > CNAME

git init

git add -A

git commit -m 'deploy'

# 部署到 https:// .github.io

# git push -f git@github.com: / .github.io.git master

# 部署到 https:// .github.io/

# git push -f git@github.com: / .git master:gh-pages

cd -

~~~

然后执行deploy.sh

~~~

//需要配置好环境gitbash,cmder

sh deploy.sh

//会运行文件里的命令

~~~

以上是手动纯静态文件打包部署预览链接(部署到GitHub),来自于vue的cli官方文件,使用的是yarn的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
1
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!