VueCLi build 编译运行报错404

（1）项目打包

终端运行命令
npm run build

打包成功的标志与项目的改变，如下图：

  

 

  
1
 

idea里面点击index.html，通过浏览器运行，出现以下报错，如图：

那么应该如何修改呢？
具体步骤如下：

1 新建文件vue.config.js
2

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? './'
        : '/'
};


  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

（2）运行打包项目

需要开启服务运行

使用http-server 运行（如没有安装http-server的，使用node 全局安装 http-server 即可，cnpm install http-server -g）
使用http-server 运行（如没有安装http-server的，使用node 全局安装 http-server 即可，npm install http-server -g）

cd dist 
http-server 

  

 

  
1
  
2
  
3
 

部分引用；https://www.cnblogs.com/fightjianxian/p/10689778.html

事出有因

vue 打包后使用dist 运行就出现404报错

运行界面

"You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined"

打包日志

> 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/讲师头像/头像2.jpg (457 KiB)
  static/image/讲师头像/头像1.jpg (491 KiB)
  static/image/测试视频/test.mp4 (527 KiB)
  static/image/讲师头像/头像3.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



  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
  
84
  
85
  
86
  
87
  
88
  
89
  
90
  
91
  
92
  
93
  
94
  
95
  
96
  
97
  
98
  
99
  
100
  
101
  
102
  
103
  
104
  
105
  
106
  
107
  
108
  
109
  
110
  
111
  
112
  
113
  
114
  
115
  
116
  
117
  
118
  
119
  
120
  
121
  
122
  
123
  
124
  
125
  
126
  
127
  
128
  
129
  
130
  
131
  
132
  
133
  
134
  
135
  
136
  
137
  
138
  
139
  
140
  
141
  
142
  
143
  
144
  
145
  
146
  
147
  
148
  
149
  
150
  
151
  
152
  
153
  
154
  
155
  
156
  
157
  
158
  
159
  
160
  
161
  
162
  
163
  
164
  
165
  
166
  
167
  
168
  
169
  
170
  
171
  
172
  
173
  
174
  
175
  
176
  
177
  
178
  
179
  
180
  
181
  
182
  
183
  
184
  
185
  
186
  
187
  
188
  
189
  
190
  
191
  
192
  
193
  
194
  
195
  
196
  
197
  
198
  
199
  
200
  
201
  
202
  
203
  
204
  
205
  
206
  
207
  
208
  
209
  
210
  
211
  
212
  
213
  
214
  
215
  
216
  
217
  
218
  
219
  
220
  
221
  
222
  
223
  
224
  
225
  
226
  
227
  
228
  
229
  
230
  
231
  
232
  
233
  
234
  
235
  
236
  
237
  
238
  
239
  
240
  
241
  
242
 

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 npm@6.10.3
3 info using node@v12.10.0
4 verbose run-script [ 'prebuild-prod', 'build-prod', 'postbuild-prod' ]
5 info lifecycle admin@0.1.0~prebuild-prod: admin@0.1.0
6 info lifecycle admin@0.1.0~build-prod: admin@0.1.0
7 verbose lifecycle admin@0.1.0~build-prod: unsafe-perm in lifecycle true
8 verbose lifecycle admin@0.1.0~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 admin@0.1.0~build-prod: CWD: C:\Users\hiszm\app\project\course_project\admin
10 silly lifecycle admin@0.1.0~build-prod: Args: [ '/d /s /c', 'vue-cli-service build --mode prod' ]
11 silly lifecycle admin@0.1.0~build-prod: Returned: code: 1  signal: null
12 info lifecycle admin@0.1.0~build-prod: Failed to exec build-prod script
13 verbose stack Error: admin@0.1.0 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 admin@0.1.0
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 admin@0.1.0 build-prod: `vue-cli-service build --mode prod`
22 error Exit status 1
23 error Failed at the admin@0.1.0 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 ]



  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
 

.

文章来源: hiszm.blog.csdn.net，作者：孙中明，版权归原作者所有，如需转载，请联系作者。

原文链接：hiszm.blog.csdn.net/article/details/117912256