(1) Project packaging
Terminal running command
NPM run build NPM run build
The signs of successful packaging and project changes, as follows.
Click index. HTML in idea and run it through the browser. The following error is reported, as shown in the figure:
So how to modify it
1 new file Vue. Config. JS
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
?'./'
: '/'
};
(2) Run packaged project
Need to start service running
Use HTTP server to run (if HTTP server is not installed, use node global to install HTTP server, cnpm install HTTP server – G) </ s>
use HTTP server to run (if HTTP server is not installed, use node global to install HTTP server, NPM install HTTP server – G)
cd dist
http-server
After Vue is packaged and run with dist, 404 errors will appear
Operation interface
“You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined”
Package log
> vue-cli-service build --mode prod
| Building for prod...Browserslist: caniuse-lite is outdated. Please run next command `npm update`
- Building for prod...
WARNING Compiled with 3 warnings 9:59:55
warning
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
ace/assets/css/ace.min.css (388 KiB)
ace/assets/font-awesome/4.5.0/fonts/fontawesome-webfont.svg (357 KiB)
ace/assets/js/jquery.jqGrid.min.js (304 KiB)
static/image/Lecturer avatar/avatar2.jpg (457 KiB)
static/image/lecturer-avatar/avatar1.jpg (491 KiB)
static/image/test-video/test.mp4 (527 KiB)
static/image/lecturer-headshot/headshot3.jpg (611 KiB)
warning
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (275 KiB)
js/chunk-vendors.4f6dcfa9.js
css/app.a324ac6d.css
js/app.a0d6c6e8.js
warning
webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
File Size Gzipped
dist\ace\assets\js\jquery.jqGrid.min.j 303.77 KiB 84.65 KiB
s
dist\ace\assets\js\jquery-ui.min.js 234.70 KiB 63.41 KiB
dist\ace\assets\js\fullcalendar.min.js 104.95 KiB 30.21 KiB
dist\ace\assets\js\jquery-ui.custom.mi 98.89 KiB 25.63 KiB
n.js
dist\ace\assets\js\jquery-1.11.3.min.j 93.74 KiB 32.56 KiB
s
dist\zTree_v3\api\apiCss\jquery-1.6.2. 89.41 KiB 31.35 KiB
min.js
dist\ace\assets\js\jquery-2.1.4.min.js 82.40 KiB 28.90 KiB
dist\ace\assets\js\jquery.dataTables.m 81.28 KiB 27.66 KiB
in.js
dist\zTree_v3\js\jquery-1.4.4.min.js 76.76 KiB 26.47 KiB
dist\zTree_v3\js\jquery.ztree.all.min. 65.93 KiB 17.93 KiB
js
dist\ace\assets\js\select2.min.js 63.43 KiB 18.14 KiB
dist\ace\assets\js\ace.min.js 54.48 KiB 15.02 KiB
dist\ace\assets\js\jquery.sparkline.in 53.87 KiB 16.61 KiB
dex.min.js
dist\ace\assets\js\holder.min.js 51.72 KiB 17.26 KiB
dist\ace\assets\js\bootstrap-editable. 49.77 KiB 12.57 KiB
min.js
dist\ace\assets\js\ace-elements.min.js 40.11 KiB 12.36 KiB
dist\ace\assets\js\moment.min.js 39.75 KiB 13.64 KiB
dist\ace\assets\js\bootstrap-datetimep 37.07 KiB 9.07 KiB
icker.min.js
dist\ace\assets\js\bootstrap.min.js 36.00 KiB 9.54 KiB
dist\ace\assets\js\jquery.flot.min.js 35.96 KiB 12.57 KiB
dist\zTree_v3\js\jquery.ztree.core.min 34.61 KiB 9.44 KiB
.js
dist\ace\assets\js\bootstrap-datepicke 33.58 KiB 9.84 KiB
r.min.js
dist\ace\assets\js\dropzone.min.js 32.80 KiB 9.78 KiB
dist\ace\assets\js\daterangepicker.min 31.72 KiB 6.96 KiB
.js
dist\ace\assets\js\chosen.jquery.min.j 26.71 KiB 6.30 KiB
s
dist\ace\assets\js\jquery.validate.min 22.17 KiB 7.15 KiB
.js
dist\ace\assets\js\bootstrap-multisele 20.92 KiB 5.93 KiB
ct.min.js
dist\zTree_v3\js\jquery.ztree.exedit.m 20.67 KiB 6.41 KiB
in.js
dist\ace\assets\js\bootstrap-markdown. 19.25 KiB 5.70 KiB
min.js
dist\ace\assets\js\bootstrap-timepicke 18.41 KiB 4.60 KiB
r.min.js
dist\ace\assets\js\bootstrap-colorpick 18.09 KiB 5.56 KiB
er.min.js
dist\ace\assets\js\excanvas.min.js 17.56 KiB 7.01 KiB
dist\ace\assets\js\jquery-additional-m 17.33 KiB 5.08 KiB
ethods.min.js
dist\ace\assets\js\markdown.min.js 16.21 KiB 5.91 KiB
dist\ace\assets\js\dataTables.buttons. 15.81 KiB 5.05 KiB
min.js
dist\ace\assets\js\prettify.min.js 14.21 KiB 6.42 KiB
dist\ace\assets\js\jquery.bootstrap-du 14.07 KiB 3.27 KiB
allistbox.min.js
dist\ace\assets\js\jquery.colorbox.min 11.64 KiB 4.62 KiB
.js
dist\ace\assets\js\buttons.html5.min.j 11.27 KiB 4.39 KiB
s
dist\zTree_v3\js\jquery.ztree.excheck. 10.65 KiB 3.12 KiB
min.js
dist\ace\assets\js\buttons.flash.min.j 10.60 KiB 3.91 KiB
s
dist\ace\assets\js\dataTables.select.m 10.59 KiB 3.17 KiB
in.js
dist\ace\assets\js\jquery.knob.min.js 10.55 KiB 3.52 KiB
dist\ace\assets\js\jquery.raty.min.js 10.29 KiB 3.43 KiB
dist\ace\assets\js\jquery.flot.pie.min 10.21 KiB 3.89 KiB
.js
dist\ace\assets\js\tree.min.js 9.06 KiB 2.50 KiB
dist\static\js\jquery.blockUI.min.js 9.04 KiB 3.30 KiB
dist\ace\assets\js\jquery.mobile.custo 7.65 KiB 2.88 KiB
m.min.js
dist\ace\assets\js\jquery.nestable.min 7.52 KiB 2.49 KiB
.js
dist\ace\assets\js\ace-editable.min.js 7.33 KiB 2.05 KiB
dist\ace\assets\js\wizard.min.js 7.32 KiB 2.29 KiB
dist\ace\assets\js\spinbox.min.js 6.48 KiB 2.02 KiB
dist\ace\assets\js\ace-extra.min.js 6.09 KiB 2.19 KiB
dist\zTree_v3\js\jquery.ztree.exhide.m 5.18 KiB 1.55 KiB
in.js
dist\ace\assets\js\bootstrap-tag.min.j 4.30 KiB 1.71 KiB
s
dist\ace\assets\js\respond.min.js 4.27 KiB 2.10 KiB
dist\ace\assets\js\jquery.gritter.min. 4.26 KiB 1.78 KiB
js
dist\ace\assets\js\jquery.maskedinput. 4.23 KiB 1.91 KiB
min.js
dist\ace\assets\js\jquery.inputlimiter 4.17 KiB 1.86 KiB
.min.js
dist\ace\assets\js\jquery.easypiechart 3.96 KiB 1.67 KiB
.min.js
dist\ace\assets\js\jquery.dataTables.b 3.76 KiB 1.55 KiB
ootstrap.min.js
dist\ace\assets\js\bootstrap-wysiwyg.m 3.63 KiB 1.53 KiB
in.js
dist\ace\assets\js\autosize.min.js 3.20 KiB 1.21 KiB
dist\ace\assets\js\html5shiv.min.js 2.67 KiB 1.32 KiB
dist\ace\assets\js\buttons.colVis.min. 2.63 KiB 0.94 KiB
js
dist\ace\assets\js\jquery.flot.resize. 2.34 KiB 1.10 KiB
min.js
dist\ace\assets\js\jquery.hotkeys.inde 2.19 KiB 1.13 KiB
x.min.js
dist\ace\assets\js\buttons.print.min.j 1.77 KiB 0.91 KiB
s
dist\ace\assets\js\jquery.ui.touch-pun 1.26 KiB 0.58 KiB
ch.min.js
dist\zTree_v3\js\jquery.ztree.all.js 145.70 KiB 25.70 KiB
dist\js\chunk-vendors.4f6dcfa9.js 143.71 KiB 50.94 KiB
dist\js\app.a0d6c6e8.js 131.06 KiB 33.50 KiB
dist\zTree_v3\js\jquery.ztree.core.js 72.09 KiB 13.25 KiB
dist\zTree_v3\js\jquery.ztree.exedit.j 49.07 KiB 9.47 KiB
s
dist\zTree_v3\api\apiCss\jquery.ztree. 34.61 KiB 9.44 KiB
core.js
dist\zTree_v3\api\apiCss\api.js 29.59 KiB 5.94 KiB
dist\ace\assets\js\jquery-typeahead.js 26.27 KiB 8.00 KiB
dist\zTree_v3\js\jquery.ztree.excheck. 24.54 KiB 4.48 KiB
js
dist\zTree_v3\js\jquery.ztree.exhide.j 12.59 KiB 2.38 KiB
s
dist\ace\assets\js\bootbox.js 9.75 KiB 3.63 KiB
dist\static\js\md5.js 8.72 KiB 2.69 KiB
dist\ace\assets\js\spin.js 5.50 KiB 2.57 KiB
dist\zTree_v3\demo\js\fuzzysearch.js 4.85 KiB 1.91 KiB
dist\ace\assets\js\grid.locale-en.js 3.94 KiB 1.73 KiB
dist\static\js\tool.js 3.22 KiB 1.34 KiB
dist\static\js\progress.js 1.90 KiB 0.58 KiB
dist\static\js\enums.js 1.27 KiB 0.42 KiB
dist\static\js\session-storage.js 0.72 KiB 0.36 KiB
dist\static\js\toast.js 0.54 KiB 0.17 KiB
dist\static\js\local-storage.js 0.51 KiB 0.27 KiB
dist\static\js\validator.js 0.45 KiB 0.23 KiB
dist\static\js\loading.js 0.44 KiB 0.31 KiB
dist\static\js\confirm.js 0.39 KiB 0.24 KiB
dist\ace\assets\css\ace.min.css 387.63 KiB 60.61 KiB
dist\ace\assets\css\ace-part2.min.css 125.66 KiB 22.23 KiB
dist\ace\assets\css\ace-rtl.min.css 114.07 KiB 15.10 KiB
dist\ace\assets\css\bootstrap.min.css 113.10 KiB 19.21 KiB
dist\ace\assets\css\ace-skins.min.css 76.13 KiB 8.77 KiB
dist\ace\assets\css\font-awesome.min.c 26.82 KiB 6.09 KiB
ss
dist\ace\assets\font-awesome\4.5.0\css 26.82 KiB 6.09 KiB
\font-awesome.min.css
dist\ace\assets\css\bootstrap-datepick 20.16 KiB 2.36 KiB
er3.min.css
dist\ace\assets\css\bootstrap-editable 16.61 KiB 2.61 KiB
.min.css
dist\ace\assets\css\jquery-ui.min.css 14.55 KiB 4.69 KiB
dist\ace\assets\css\select2.min.css 14.42 KiB 1.90 KiB
dist\zTree_v3\api\apiCss\common.css 13.36 KiB 3.38 KiB
dist\ace\assets\css\ui.jqgrid.min.css 12.63 KiB 2.65 KiB
dist\ace\assets\css\fullcalendar.min.c 11.85 KiB 2.85 KiB
ss
dist\ace\assets\css\chosen.min.css 10.87 KiB 2.27 KiB
dist\ace\assets\css\dropzone.min.css 9.49 KiB 1.50 KiB
dist\ace\assets\css\ace-ie.min.css 9.40 KiB 1.89 KiB
dist\zTree_v3\css\awesomeStyle\awesome 8.19 KiB 1.40 KiB
.css
dist\ace\assets\css\bootstrap-datetime 7.52 KiB 1.28 KiB
picker.min.css
dist\zTree_v3\css\metroStyle\metroStyl 6.42 KiB 1.38 KiB
e.css
dist\zTree_v3\css\zTreeStyle\zTreeStyl 6.08 KiB 1.37 KiB
e.css
dist\ace\assets\css\daterangepicker.mi 5.48 KiB 1.24 KiB
n.css
dist\ace\assets\css\bootstrap-colorpic 3.69 KiB 0.96 KiB
ker.min.css
dist\ace\assets\css\jquery-ui.custom.m 2.97 KiB 0.93 KiB
in.css
dist\ace\assets\css\bootstrap-timepick 2.95 KiB 0.83 KiB
er.min.css
dist\ace\assets\css\colorbox.min.css 2.91 KiB 0.91 KiB
dist\zTree_v3\api\apiCss\zTreeStyleFor 2.73 KiB 0.95 KiB
Api.css
dist\zTree_v3\css\demo.css 2.11 KiB 0.90 KiB
dist\ace\assets\css\jquery.gritter.min 1.56 KiB 0.54 KiB
.css
dist\ace\assets\css\bootstrap-duallist 1.41 KiB 0.38 KiB
box.min.css
dist\zTree_v3\api\apiCss\common_ie6.cs 1.22 KiB 0.46 KiB
s
dist\ace\assets\css\bootstrap-multisel 1.11 KiB 0.35 KiB
ect.min.css
dist\css\app.a324ac6d.css 0.63 KiB 0.34 KiB
dist\ace\assets\css\prettify.min.css 0.52 KiB 0.29 KiB
dist\ace\assets\css\fonts.googleapis.c 0.48 KiB 0.26 KiB
om.css
dist\static\css\style.css 0.08 KiB 0.11 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
debug
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\\Users\\hiszm\\app\\nodejs\\node.exe',
1 verbose cli 'C:\\Users\\hiszm\\app\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build-prod',
1 verbose cli '--scripts-prepend-node-path=auto'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild-prod', 'build-prod', 'postbuild-prod' ]
5 info lifecycle [email protected]~prebuild-prod: [email protected]
6 info lifecycle [email protected]~build-prod: [email protected]
7 verbose lifecycle [email protected]~build-prod: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build-prod: PATH: C:\Users\hiszm\app\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\hiszm\app\project\course_project\admin\node_modules\.bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Users\hiszm\app\nodejs\;C:\ProgramData\chocolatey\bin;C:\Program Files (x86)\NetSarang\Xshell 7\;C:\Users\hiszm\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Bandizip\;C:\Program Files\JetBrains\IntelliJ IDEA 2020.2.2\bin;C:\Users\hiszm\app\JDK8_64\bin;C:\Users\hiszm\AppData\Roaming\npm;C:\Users\hiszm\AppData\Local\GitHubDesktop\bin;C:\Users\hiszm\AppData\Local\Programs\Microsoft VS Code\bin
9 verbose lifecycle [email protected]~build-prod: CWD: C:\Users\hiszm\app\project\course_project\admin
10 silly lifecycle [email protected]~build-prod: Args: [ '/d /s /c', 'vue-cli-service build --mode prod' ]
11 silly lifecycle [email protected]~build-prod: Returned: code: 1 signal: null
12 info lifecycle [email protected]~build-prod: Failed to exec build-prod script
13 verbose stack Error: [email protected] build-prod: `vue-cli-service build --mode prod`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (C:\Users\hiszm\app\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:326:16)
13 verbose stack at EventEmitter.emit (events.js:209:13)
13 verbose stack at ChildProcess.<anonymous> (C:\Users\hiszm\app\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:209:13)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\hiszm\app\project\course_project\admin
16 verbose Windows_NT 10.0.19041
17 verbose argv "C:\\Users\\hiszm\\app\\nodejs\\node.exe" "C:\\Users\\hiszm\\app\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build-prod" "--scripts-prepend-node-path=auto"
18 verbose node v12.10.0
19 verbose npm v6.10.3
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build-prod: `vue-cli-service build --mode prod`
22 error Exit status 1
23 error Failed at the [email protected] build-prod script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
.