vue项目打包成app-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue项目打包成app。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先解决项目打包后dist里的index.html无法出现的原因。打开后控制台是这样的

vue项目打包成app,vue.js,前端,javascript

在vue的vue.config.js中将路径修改为"./"

vue项目打包成app,vue.js,前端,javascript

改一下路由模式，找到router/index.js文件, 将history修改为hash, 再进行打包，这时候dist里的index.html就能正常显示了

vue项目打包成app,vue.js,前端,javascript

在编辑器中打开打包好的dist

vue项目打包成app,vue.js,前端,javascript

在dist里添加package.json的一个文件

vue项目打包成app,vue.js,前端,javascript

{
  "name": "鼠标放图标上面的提示文字",
  "version": "1.0.0",
  "description": "应用介绍",
  "main": "/index.html", // html文件的路径，就是当前文件夹那个
  "nodejs":true,
  "window": {
    "title": "ERP",// 右边任务栏的图标放上去的提示文字 有中文会乱码显示
    "icon": "./img/erp.png", // 任务栏图标路径 png格式
    "toolbar": true,
    "frame": true,
    "position": "center",
    "width": 1920,
    "height": 1080,
    "show_in_taskbar": true // 是否在任务栏显示图标
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dist": "build --tasks win-x86,win-x64,win-x32 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
    "start": "run --x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nwjs-builder-phoenix": "^1.15.0"
  },
  "build": {
    "nwVersion": "0.27.5"
  }
}