Tag Archives: vue.js

PHP big file upload problem (500m or above)

An overview,
 
A breakpoint is simply a download, which means to continue downloading a file from where it has already been downloaded. Breakpoints were not supported in previous versions of the HTTP protocol, and HTTP/1.1 has been since. The Range and content-Range headers are usually used for breakpoints. HTTP protocol itself does not support breakpoint upload, you need to implement their own.
 
Second, the Range
 
Used in the request header to specify the position of the first byte and the position of the last byte, in general format:
 
Range: For client-to-server requests, you can change a field to specify the size and unit of a download file. Byte offset starts at 0. Typical format:
Ranges: (unit=first byte Pos)-[last byte Pos]
Ranges: Bytes =4000- Download from the beginning of byte 4000 to the end of file
Ranges: Bytes =0~N to download contents in the 0-n byte range
Ranges: Bytes = M-n to download contents in the M-n byte range
Ranges: Bytes = -n to download the last N-byte content

 
1. The following points should be noted:
(1) The data interval is a closed interval with a starting value of 0, so a request like “Range: Bytes =0-1” is actually two bytes at the beginning of the request.
(2) “Range: Bytes =-200”, which does not represent the 201 bytes at the beginning of the request file, but the 200 bytes at the end of the request file.
(3) If the last Byte POS is less than the first Byte POS, then the Range request is invalid. The server needs to ignore the Range request, then respond with a 200, and send the entire file to the client.
(4) If the last Byte POS was greater than or equal to the file length, then the Range request was considered unsatisfiable and the server needed to respond to a 416, Requested Range not Satisfiable.
 
2. Example explanation:
Bytes =0-499 bytes
Bytes =500-999 bytes
Bytes =-500 bytes
Bytes =500- = range after 500 bytes
First and last bytes: Bytes =0-0,-1
Also specify a range: Bytes =500-600,601-999
 
Third, the Content – Range
 
Used in the response header to specify the insertion location of a portion of the entire entity, which also indicates the length of the entire entity. Before the server returns a partial response to the client, it must describe the extent of the response coverage and the entire entity length. General format:
 
Content-range: Bytes (Unit first Byte pos) – [Last Byte pos]/[Entity Legth]
 
4. Header examples
 
Request to download the entire file:
 
GET/test. Rar HTTP/1.1
Connection: close
Host: 116.1.219.219
Range: Bytes =0-801 // Bytes =0- Or don’t use this header
 
General normal response
 
HTTP/1.1 200 OK
The Content – Length: 801
The content-type: application/octet stream
Content-range: Bytes 0-800/801 //801: Total file size
 
The simplest breakpoint continuation implementation is as follows:
1. The client has downloaded a 1024K file, of which 512K has been downloaded
2. The network is interrupted, and the client requests the continuation of transmission. Therefore, it is necessary to declare the fragment to be continued this time in the HTTP header:
Range:bytes=512000-
This header tells the server to transfer the file from the 512K location of the file
3. The server receives the breakpoint to continue the transmission request, starting from the 512K position of the file, and adds in the HTTP header:
Content-Range:bytes 512000-/1024000
And the server should return an HTTP status code of 206 instead of 200.
However, in a real scenario, the content of the file corresponding to the URL has changed at the server side when the terminal initiates the continuation request, and the data of the continuation is definitely wrong. How to solve this problem?Obviously at this point we need a way to identify the uniqueness of the file. There is also a definition in RFC2616, such as last-modified to indicate the Last modification time of a file, so that you can determine whether any changes have been made during the continuation of the file. Also defined in RFC2616 is an ETag header that can be used to place a unique identifier for a file, such as the MD5 value of the file.
When a terminal initiates a continuation request, it should declare the IF-match or IF-modified-since fields in the HTTP header to help the server identify file changes.
In addition, there is also an IF-range header defined in RFC2616. If the terminal USES iF-range in continuation. The content in the IF-range can be the first ETag header received or the Last modification in the Last-ModFIED. When the server receives the continuation request, it verifies through the contents in the IF-range. If the verification is consistent, it returns the continuation reply of 206; If not, it returns 200. The content of the reply is all the data of the new file.

the relevant reference links: http://blog.ncmem.com/wordpress/2019/08/09/http%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/
welcome into the group to discuss: 374992201

VUEJS Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of

Failed to execute ‘removeChild’ on ‘Node’ : The Node to be removed is not a child of this Node.

in my previous post
VUEJS project practice 5 Dialog pop-up box MessageBox (very nice bootstrap style)
has introduced a MesageBox style combined with bootstrap style
Then in the previous post
VUEJS project practice 4 custom keyboard instructions (keystrokes to get focus)
introduced a way for keystrokes to automatically get focus and trigger events.
Now when MessageBox binds Enter, an error
messagebox.vue?Cb02 :80 Uncaught DOMException: Failed to execute ‘removeChild’ on ‘Node’ : The Node to be removed is not a child of this Node.

First post the message.vue file

<template>
  <div v-key-bind-listen>
      <div class="msgBox" v-show="isShowMessageBox">
        <div class="msgBox_header">
          <div class="msgBox_title">
            <h3>{{ title }}</h3>
          </div>
        </div>

        <div class="msgBox_content">
          <p>{{ content }}</p>
        </div>

        <div class="msgBox_btns">
          <button type="button" class="btn btn-lime btn-lg" id="confirmBtn" @click="confirm"  bind_key="ENTER">确定</button>
          <button type="button" class="btn btn-dark btn-lg" id="cancelBtn" @click="cancel"  bind_key="ESC">取消</button>

        </div>

      </div>
  </div>
</template>

<script>
  export default {
    name: 'messageBox',
    data(){
      return {
        title: '',
        content: '',
        isShowMessageBox: false,
        resolve: '',
        reject: '',
        promise: '' // 保存promise对象
      }
    },
    methods: {
      close(state){
        this.model.show = false;
        if(this.model.callback){
          this.model.callback(state);
        }
      },
    // 确定,将promise断定为resolve状态
    confirm: function () {
      this.isShowMessageBox = false;
      this.resolve('confirm');
      this.remove();
    },
    // 取消,将promise断定为reject状态
    cancel: function () {
      this.isShowMessageBox = false;
      this.reject('cancel');
      this.remove();
    },
    // 弹出messageBox,并创建promise对象
    showMsgBox: function () {
      this.isShowMessageBox = true;
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      // 返回promise对象
      return this.promise;
    },
    remove: function () {
      setTimeout(() => {
        this.destroy();
      }, 300);
    },
    destroy: function () {
      this.$destroy();
      document.body.removeChild(this.$el);
    }
  }
  }
</script>

<style scoped>
  .msgBox {
    position: fixed;
    z-index: 4;
    left: 50%;
    top: 35%;
    transform: translateX(-50%);
    width: 420px;
    background-color: black;
    opacity: 0.55;
  }

  .msgBox_header {
    padding: 20px 20px 0;
  }

  .msgBox_title {
    padding-left: 0;
    margin-bottom: 0;
    font-size: 26px;
    font-weight: 800;
    height: 18px;
    color: #fff;
  }

  .msgBox_content {
    padding: 30px 20px;
    color: #fff;
    font-size: 18px;
    font-weight: 200;
  }

  .msgBox_btns {
    padding: 10px 20px 15px;
    text-align: right;
    overflow: hidden;
  }

  @keyframes show-messageBox {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;

    }
  }

  @keyframes bounce-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;

    }
  }


</style>

The V-key-bind-listen instruction defined here is used for key listening. For details, please refer to the previous blog. It would be boring to write it again.
VUEJS project practice four custom keyboard commands (keys to get focus)
When you press ESC to cancel, there is no problem
when you press ENTER to confirm, the error will appear in the newspaper
messagebox.vue?Cb02:80 Uncaught DOMException: Failed to execute ‘removeChild’ on ‘Node’ : The Node to be removed is not a child of this Node.
Error is located via console.

>
add a line of logs in the destroy method. The console prints this.$el.

console.log(this.$el)

Add a line of logs to determine if this.$el is a child of the body

console.log(document.body.contains(this.$el))

Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory

1. problem description.
At present, when compressing the front-end code, there are memory leaks in the nodes, errors as follows: invalid marker – collating nearby heap limit allocation failure – JavaScript heap memory
2. The errors are as follows.

Warning: callback based version of packager() has been deprecated and will be removed from future major releases, please convert to committed version or use nodeify module.
Packager application for win32 ia32 platform, using ev4.0.5
—last few times–>
ms: Mark-sweep 1294.7 (1425.0) -> 1294.7 (1425.5) MB, 1723.7/0.0 ms (average mu = 0.094, current mu = 0.000) last resort GC requests for old space
[23328:00000202C8E3E9D0] 11281890 ms: marker scan 1295.7 (1425.5)->1294.7 (1426.5) MB, 1734.9/0.0 ms (average mu = 0.101, current mu = 0.108) assignment failure clearance may not be successful

<- JS stacktrace ->

0: ExitFrame [pc: 000003C6B7315600]
Security context: 0x01457ba9e6e1 <JSObject>
1: access [0000031C1EB050F9] [fs]js: ~ 167] [pc = 000003 c6b7319b09] (= 0 x01dd68b04d69 & lt;object mapping = 00000232 d8c16af9>, = 0 x00b368108379 & lt;path string[737]:E: \pacs-consultation-electron-meeting \ node_modules \ stompjs \ node_modules \ websocket \\ node_modules \ es5-ext \ node_modules \ es6-iterator \ node_modules \ d\ node_modules \ es5-ext \ node_modules \ es6-iterator \ node_modules \ es6-iterator \ node_modules \ es6-iterator node__……
Fatal error: Invalid marker – failed collation nearby heap limit allocation – JavaScript heap memory
1: 00007 ff67be308aa v8: Internal:GCIdleTimeHandler: GCIdleTimeHandler + 4810
2: 00007 ff67be09c46 node:MakeCallback + 4518
3: 00007 ff67be0a630 node_module_register + 2160
4: 00007 ff67c09aa4e v8: Internal:FatalProcessOutOfMemory + 846
5: 00007 ff67c09a97f v8:Internal:FatalProcessOutOfMemory + 639
6: 00007 ff67c5d8984 v8:internal:heap:MaxHeapGrowingFactor + 11476
7:00007 ff67c5cf0e7 v8::internal::ScavengeJob::operator= + 25543
8: 00007 ff67c5cd65c v8:Internal:ScavengeJob::operator= + 18748
9: 00007 ff67c5d65d7 v8:Internal:Heap:MaxHeapGrowingFactor + 2343
10: 00007 ff67c5d6656 v8:Internal:Heap:MaxHeapGrowingFactor + 2470
11: 00007 ff67c1790db v8:Internal::Factory::AllocateRawWithImmortalMap + 59
12: 00007 ff67c17ba9d v8:Internal::Factory::NewRawOneByteString + 77
13: 00007 ff67c38fbc4 v8: Internal:Heavy:SmiPrint + 372
14:00007FF67C08DF5B v8::internal::StringHasher::UpdateIndex+219
15: 00007FF67C0B44CB v8::WriteUtf8+171
16: 00007FF67BD3F1A0 std::basic_ostream<:operator< +40912
17: 00007FF67BDC9B92 uv_loop_fork+13762
18: 000003c6b7315600
npm ERR!Code ELIFECYCLE
npm ERR!er!pac – electronic [email protected] build:win32: ‘ cross-env BUILD_TARGET=win32 node .electron-vue/build. js ‘
npm made a mistake! Exit Status 134
npm ERR!
npm ERR! In pac – electronic [email protected]构建:win32脚本中失败.
npm made an error! This may not be a problem with npm. There may be additional log output above.
npm made an error! The full log of this run can be found in the following file:
npm ERR!C:\Users\boyi08\AppData\Roaming\npm-cache\_logs\ 2020 – 02 – 25 – t04_43_09_617z debug.log
3. Solutions
Programme I.
In the package. inside the json: add this sentence:–max_old_space_size = 8192 // or max_old_space_size = 4096 (it is recommended to set to 4 g to see, if not set to 8 g)
“script”: {
“dev”: “node build/dev-server.” “start”: “node build/dev-server.” node -max_old_space_size=8192 build/build”.
“build”: “node -max_old_space_size=8192 build/build. js ”
},
Programme 2.
Delete the npmrc file (not the npmrc file in the nodejs installation directory under the npm module, but the .npmrc file in C: \\user\{account}\).

Module build failed: error: cannot find module ‘node sass’ error

NPM run dev error message is as follows:

Module build failed: Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.sassLoader (E:\trip_user_ui\node_modules\sass-loader\lib\loader.js:46:72)
 
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-c221866a","
scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vux-loader/src/style-loader.js!./node_modules/vu
e-loader/lib/selector.js?type=styles&index=0!./src/page/Index.vue 4:14-424 13:3-17:5 14:22-432
 @ ./src/page/Index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
 
 error  in ./src/page/addPerson.vue
 
Module build failed: Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.sassLoader (E:\trip_user_ui\node_modules\sass-loader\lib\loader.js:46:72)
 
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-485da622","
scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vux-loader/src/style-loader.js!./node_modules/vu
e-loader/lib/selector.js?type=styles&index=0!./src/page/addPerson.vue 4:14-428 13:3-17:5 14:22-436
 @ ./src/page/addPerson.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
 
 error  in ./src/page/callPolice.vue
 
Module build failed: Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.sassLoader (E:\trip_user_ui\node_modules\sass-loader\lib\loader.js:46:72)
 
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-31d77fd3","
scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vux-loader/src/style-loader.js!./node_modules/vu
e-loader/lib/selector.js?type=styles&index=0!./src/page/callPolice.vue 4:14-429 13:3-17:5 14:22-437
 @ ./src/page/callPolice.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
 
 error  in ./src/page/passenger.vue
 
Module build failed: Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.sassLoader (E:\trip_user_ui\node_modules\sass-loader\lib\loader.js:46:72)
 
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-9a9a079a","
scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vux-loader/src/style-loader.js!./node_modules/vu
e-loader/lib/selector.js?type=styles&index=0!./src/page/passenger.vue 4:14-428 13:3-17:5 14:22-436
 @ ./src/page/passenger.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js

says you can’t find node-sass, so just think install a node-sass. But the result is not!! Enter the command NPM install node-sass –save-dev

error as follows:

gyp info it worked if it ends with ok
gyp verb cli [ 'C:\\Program Files\\nodejs\\node.exe',
gyp verb cli   'E:\\trip_user_ui\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library=' ]
gyp info using node-gyp@3.8.0
gyp info using node@10.15.0 | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (E:\trip_user_ui\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\trip_user_ui\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\trip_user_ui\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\trip_user_ui\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:154:21)
gyp verb `which` failed  python2 { Error: not found: python2
gyp verb `which` failed     at getNotFoundError (E:\trip_user_ui\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\trip_user_ui\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\trip_user_ui\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\trip_user_ui\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:154:21)
gyp verb `which` failed   stack:
gyp verb `which` failed    'Error: not found: python2\n    at getNotFoundError (E:\\trip_user_ui\\node_modules\\which\\which.js:13:12)\n    at F (E:\\trip_user_ui
\\node_modules\\which\\which.js:68:19)\n    at E (E:\\trip_user_ui\\node_modules\\which\\which.js:80:29)\n    at E:\\trip_user_ui\\node_modules\\which\\which.js:8
9:16\n    at E:\\trip_user_ui\\node_modules\\isexe\\index.js:42:5\n    at E:\\trip_user_ui\\node_modules\\isexe\\windows.js:36:5\n    at FSReqWrap.oncomplete (fs.
js:154:21)',
gyp verb `which` failed   code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
gyp verb `which` failed     at getNotFoundError (E:\trip_user_ui\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\trip_user_ui\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\trip_user_ui\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\trip_user_ui\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:154:21)
gyp verb `which` failed  python { Error: not found: python
gyp verb `which` failed     at getNotFoundError (E:\trip_user_ui\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\trip_user_ui\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\trip_user_ui\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\trip_user_ui\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:154:21)
gyp verb `which` failed   stack:
gyp verb `which` failed    'Error: not found: python\n    at getNotFoundError (E:\\trip_user_ui\\node_modules\\which\\which.js:13:12)\n    at F (E:\\trip_user_ui\
\node_modules\\which\\which.js:68:19)\n    at E (E:\\trip_user_ui\\node_modules\\which\\which.js:80:29)\n    at E:\\trip_user_ui\\node_modules\\which\\which.js:89
:16\n    at E:\\trip_user_ui\\node_modules\\isexe\\index.js:42:5\n    at E:\\trip_user_ui\\node_modules\\isexe\\windows.js:36:5\n    at FSReqWrap.oncomplete (fs.j
s:154:21)',
gyp verb `which` failed   code: 'ENOENT' }
gyp verb could not find "python". checking python launcher
gyp verb could not find "python". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (E:\trip_user_ui\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (E:\trip_user_ui\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack     at E:\trip_user_ui\node_modules\graceful-fs\polyfills.js:282:31
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:154:21)
gyp ERR! System Windows_NT 10.0.16299
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "E:\\trip_user_ui\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libs
ass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd E:\trip_user_ui\node_modules\node-sass
gyp ERR! node -v v10.15.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.10.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.10.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\zsm\AppData\Roaming\npm-cache\_logs\2019-01-14T11_48_54_017Z-debug.log

NPM install previously reported a similar error.

search for CNPM install node-sass –save
may be useful, but CNPM needs to be installed first. So NPM I, CNPM is another error.

so use NPM install – g CNPM, registry=https://registry.npm.taobao.org, from taobao mirror the download, then CNPM download success.

enter CNPM install node-sass –save. NPM run Dev is finally running!!

Vue report failed to mount component: template or render function not defined

before the project is no problem, the result suddenly appeared this error, after looking up baidu found that the existing big hands to reduce the version of the vue-loader to solve, but my version is

has no problems with any other path except for the newly created component

after reading this classmate’s article, I tried to test it, and sure enough, the problem appeared on the route filling, because my writing method was roughly the same as his

solution:

since I’m writing the router/index.js file lazily, the file suffix. Vue is just as good as

How to solve the cross domain problem of Axios in Vue project

first step, configure BaseUrl:
. In main.js, configure the Url we visit with the prefix: axios.defaults. BaseUrl = ‘/ API’ // develop the local agent;
second step, configure the agent:
modify the index.js file under config folder, add relevant code in proxyTable:
third step, modify the request URL:
this.$axios.get(“/test/test123”). { console.log(res) }) .catch(err=> { console.log(err) })

Vue error: did you register the component correctly? For.., make sure to provide the “name” option (solved)

P> question:
did you register the component?For recursive components, make sure to provid the "name" option

For recursive components, make sure to provid the “name” option

import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
  component: {
    ComponentA,ComponentB
  },
  // ...
}

solution:
to correct component

import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
  components: {
    ComponentA,ComponentB
  },
  // ...
}

ERROR in static/js/app.xxxxxxx.js from UglifyJs Unexpected token: operator (>)

:
vue family barrel USES the vue-qrcode-directive component to generate the two-dimensional code in the project. There is no error in using NPM run dev in the development process. To NPM run build packaging ERROR, such as the ERROR in the static/js/app f1ecb9a5673e78cc442b. Js from UglifyJs Unexpected token: operator (& gt;) [./~/_vue – [email protected] @ vue – qrcode – directive/index, js: 4, 0] [static/js/app. F1ecb9a5673e78cc442b. Js: 17412]

analysis reason :
weback default webpack. Optimize. UglifyJsPlugin cannot compress es6 code files. Along the way, we can simply convert es6 code to ES5 using Babel.
the reason must still be on webpack.config.js. After repeated observations. The problem occurred in the loader configuration, where an item was configured for js file transformation.

solution : (the same problem occurs in _quill-image-drop-module, _vue-qrcode-directive)

module: {
  rules: [
    {
        test: /\.js$/,
        loader: "babel-loader",
        include: [
          resolve("src"),
          resolve("test"),
          resolve(
            "node_modules/[email protected]@quill-image-drop-module"
          ),
          resolve(
            "node_modules/[email protected]@vue-qrcode-directive"
          )
        ],
      }
  ]
}