196.Vue.js智能扫码点餐系统(三十)【打包发布上线测试】2019.04.01

0、知识点

  • 配置config
  • 打包发布,只打包index.html和dist两个文件
  • 扫码二维码 ,进入用餐页面

1、配置config

var config={

    api:'http://a.itying.com/', //服务器api接口地址
    return_url:'http://t.apiying.com/#/success'  //支付成功跳转地址    vue项目的地址
} 

export default config;

2、打包发布

  • 打包命令:npm run build
    196.Vue.js智能扫码点餐系统(三十)【打包发布上线测试】2019.04.01
  • 打包生成dist文件,并将所有的js文件打包成一个build.js文件

196.Vue.js智能扫码点餐系统(三十)【打包发布上线测试】2019.04.01

  • 开始发布
  • 只需将index.html和dist两个文件发给服务器
    196.Vue.js智能扫码点餐系统(三十)【打包发布上线测试】2019.04.01
  • 发布到服务器
    196.Vue.js智能扫码点餐系统(三十)【打包发布上线测试】2019.04.01

3、扫码支付

  • 扫码桌面上的二维码后,会跳转到用餐页面
    196.Vue.js智能扫码点餐系统(三十)【打包发布上线测试】2019.04.01

196.Vue.js智能扫码点餐系统(三十)【打包发布上线测试】2019.04.01

  • 当用户吃完饭,再次扫码时,进入到待支付的页面
    196.Vue.js智能扫码点餐系统(三十)【打包发布上线测试】2019.04.01

  • 支付成功,跳转到vue的页面
    196.Vue.js智能扫码点餐系统(三十)【打包发布上线测试】2019.04.01

  • 用户支付完成后,可以在扩音器中进行播放,提示支付完成的语言

  • 当要把index.html和dist文件打包发布到服务器时,要发布到根目录下,要不然找不到

  • 如果不是根目录,要把dist前面的斜杆去掉 ,“src=dist/build.js”

196.Vue.js智能扫码点餐系统(三十)【打包发布上线测试】2019.04.01