用vue-cli腳手架搭建vue項(xiàng)目后,再用以前的方法打包項(xiàng)目就不太行了就需要新的方法了
一顷编、初始化項(xiàng)目
1.先運(yùn)用交手架搭建一個(gè)項(xiàng)目堕义,cnpm i
將所需組件下載
2.下載nwjs
cnpm install nw@0.14.7-sdk --save-dev
二上陕、使應(yīng)用以nw啟動(dòng)
1. 修改package.json文件扬跋,在dev命令最后添加 --open nw
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open nw",
"start": "npm run dev"
}
--open表示服務(wù)器啟動(dòng)后打開(kāi)頁(yè)面
--open nw 后面跟nw淋样,表示用nw.js打開(kāi)頁(yè)面
2.添加下面的代碼,指定入口
"main": "http://localhost:8080/"
然后運(yùn)行npm run dev即可以正常的打開(kāi)項(xiàng)目
三胁住、配置打包
- 添加nwjs-builder-phoenix到開(kāi)發(fā)依賴
cnpm install nwjs-builder-phoenix --save-dev
- 修改config/index.js,將全部的assetsPublicPath:'/'替換為assetsPublicPath: ''刊咳,避免打包后加載不到資源
- 添加nwjs-builder-phoenix打包的選項(xiàng)到package.json
"build": {
"files": [
"dist/**/*"
],
"output": "./releases",
"nwVersion": "0.14.7",
"nwPlatforms": [
"win"
],
"nwArchs": [
"x86"
],
"overriddenProperties": {
"main": "./dist/index.html"
}
}
這里的配置中彪见,overriddenProperties指定了main在打包后的值,使得打包后可以正常加載
- 添加打包命令
"dist": "npm run build && build --tasks win-x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
- 打包
npm run dist
打包后會(huì)輸出到package.json中build.output設(shè)置的文件夾下