（1）项目打包

终端运行命令
npm run build

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

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

在这里插入图片描述

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

1 新建文件vue.config.js
2

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

（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

在这里插入图片描述

部分引用；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

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 ]

图片描述

.

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue