Blogger Information
Blog 77
fans 0
comment 2
visits 55637
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
纯静态文件打包部署预览链接,来自于vue的cli官方文件,使用的是yarn
南瓜又个梦
Original
653 people have browsed it

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

这是手动更新的配置,可以有另外自动更新的配置
1,命令行
yarn build

2.
点链接,语言切换成中文

build成功后的链接

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

  1. yarn global add serve
  2. serve -s dist
  3. //这两行是确保dist目录打包好了

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

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

  1. module.exports = {
  2. publicPath: process.env.NODE_ENV === 'production'
  3. ? '/my-project/' //生产环境的名称
  4. : '/' //
  5. }

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

  1. #!/usr/bin/env sh
  2. # 当发生错误时中止脚本
  3. set -e
  4. # 构建
  5. npm run build
  6. # cd 到构建输出的目录下
  7. cd dist
  8. # 部署到自定义域域名
  9. # echo 'www.example.com' > CNAME
  10. git init
  11. git add -A
  12. git commit -m 'deploy'
  13. # 部署到 https://<USERNAME>.github.io
  14. # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
  15. # 部署到 https://<USERNAME>.github.io/<REPO>
  16. # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
  17. cd -

然后执行deploy.sh

  1. //需要配置好环境gitbash,cmder
  2. sh deploy.sh
  3. //会运行文件里的命令
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post