(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 ]

.