Tag Archives: view

Introduce vuex error reporting solution

This error is always reported when using vuex: error in created hook: “typeerror: cannot read property ‘commit’ of undefined”

It was found that the global store was not introduced in main.js

import store from ‘store/store.js’

const app = new Vue({ …App, store })

Record it here and remind yourself to remember  

The problem of cursor skipping in wangeditor

Problem description

When using wangeditor, input content, and press enter to switch to the next line, the cursor cuts over and automatically jumps back.

Cause of the problem

After encapsulating a component, the onchange event of wangeditor will be triggered every time the content passed in from the parent is used. In the onchange event, the modified value is assigned to the parent component by passing the child to the parent. After the value of the parent component changes, the value of the child component wangeditor will also be modified. Therefore, the cursor always jumps to the last. At this point, there is another problem of concurrency, that is, it is invalid after the undo and resume click.


When the child component watch listens to the value passed in by the parent component, it adds judgment to ensure that the input content is zero and the assignment will not be triggered

Instead of using the official recommended catchdata, the child component uses the method of passing the value to the parent component (that is, $emit) to synchronize the value to the parent component, so as to ensure that the value of the parent component is consistent with the content of the rich text when saving

if it can help you, please use your little hand to like it
thank you.

“Failed to load resource: net::ERR_FILE_NOT_FOUND” error. The project created by vue-cli 3.0 can run under dev, and an error is reported after packaging, and the page is blank.

Cli3.0 Solutions:
Failed to Load Resource: net::ERR_FILE_NOT_FOUND
Dist /index.html, the introduction is problematic,

The webPack configuration file cannot be found in the project created by Ue-CLi 3.0, because it is encapsulated by Ue-CLi 3.0. You only need to modify it in the vue.config.js file in the root directory of the project (if the project does not have this file, add one directly in the root directory), and set the baseUrl value to ‘./ ‘, and modify as follows

const webpack = require("webpack");
module.exports = {
    pluginOptions: new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery"
    baseUrl: './' // ADD these codes

Cli2.x Solutions:
Open config/index.js file and build-> AssetsPublicPath is changed to “./ “, which is preceded by a dot.

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',  // Here

Ok, 2. X 3.0 is all done
Please indicate the source of the reprint

Get the height of mobile phone status bar through reflection

//Get the height of the status bar by reflection, the return is the height of the status bar
    public int getStatusHeight(){
        try {
            Class<?> c = Class.forName("com.android.internal.R$dimen");
            Object o = c.newInstance();
            Field field = c.getField("status_bar_height");
            int x = (int) field.get(o);
            return mContext.getResources().getDimensionPixelOffset(x);
        } catch (Exception e) {
            return 0;

extract-text-webpack-plugin" loader is used without the corresponding plugin Error (Fixed)

This was a problem that had been bothering me for a long time before the release of the project was that you had to package and it was okay to package at the beginning and all of a sudden it went wrong today and the answers on the web were so weird that I didn’t have to say much about it and I went straight to the code

At first thought it was a plugin version problem some of it was

It doesn’t matter if it’s been tested later or if it’s been tested before or after
In webpack.prod.conf.js under build, you only need to modify the following configuration// extract css into its own file


// filename: assetsPath(‘ CSS /[name].[Contenthash]. CSS ‘),// the original configuration


The changes

// Setting the following option to `false` will not extract CSS from codesplit chunks.

// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.

// It’s currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it’s `false`,

// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110



And then it’s ok

The reason for this is not clear from the Github forum. If you are interested in what appears to be a plugin patch, check it out

Error: Cannot find module’webpack/bin/config-yargs’ solution

The following error occurred while running NPM Run Dev:

Error: Cannot find module 'webpack/bin/config-yargs'
Require stack:
- D:\javaProject\vue\myvue\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js:862:27)
    at Module.require (internal/modules/cjs/loader.js:1042:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (D:\javaProject\vue\myvue\node_modules\webpack-dev-server\bin\webpack-dev-server.js:54:1)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
  requireStack: [
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev 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\Wenxindiao\AppData\Roaming\npm-cache\_logs\2020-04-22T03_06_48_257Z-debug.log

this is because the current version of [email protected] does not support [email protected]. So simply delete the current Webpack-dev-Server folder and reinstall the higher version. The steps are as follows:

    find the project folder you created, mine is D:\javaProject\vue\myvue\node_modules\webpack-dev-server, delete the webpack-dev-server folder. Run NPM I [email protected] in the current project directory, and your webpack-dev-server version will be fine. Or update directly to the latest version
npm i –-save-dev [email protected] 

Vue Error-Error message: Syntax Error: Assigning to rvalue.

At first, I thought Syntax Error was node_modules and there was another problem, so I violently deleted the node_modules folder, and then back up in the backup file. It turned out to be useless. This is a grammatical error.
Then I continued to search for information, so I found the problem on CSDN blogger: Rabbit Gone away [click to open link].
In the HTML tag, one v-model bound property value is not declared .
So the problem was solved instantly, and I read back the wrong information afterwards, which actually gave me a very clear wrong position. As shown in figure:

It seems that we still need more observation, careful deBug ah…

(Emitted value instead of an instance of Error) Error compiling template:

Conclusion: Find out if templent contains a script and remove it
Error: (Emitted value instead of an instance of Error)
Error compiling. template:
also has a paragraph Error:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as

Reason: Error packaging vUE with elementUI for the first time

Module build failed Error Plugin/Preset files are not allowed to export objects, only functions (How to Fix)

As a way to make a project of nuxt, this exception occurred. Module build failed: Error: Plugin/ prefiles are not allowed to export objects, only functions : make of the following figure:

Ii. Problem Analysis and Solution: Babel version conflict, Babel dependency package is not compatible, package.json dependency package contains both Babel 7.0 version and Babel 6.0 version, the two versions are obviously incompatible, We can upgrade to Babel 7.0 version, through NPM install [email protected] command all upgrade to Babel 7.0 version, so the conflict problem of the versions can be solved.

Module parse failed:Unexpectedtoken (1:0)You may need an appropriate loader to handle this file type

And give me a lesson on the cruel reality, make robeletric before it has been a problem in the environment, the beginning the whole vue and waste on the environment for so long time
I will download the latest version of the node directly, so The Times running someone else’s project is wrong, then I did not think of to see if the environment problem, and a call to find on the net, then change a lot of things, and no
this time on the Internet to see says the latest version of the node with a lot of things are not compatible, 8. A few is relatively stable, then changed 8. A few of the node and project up
to come over for a few days, when I see some other module, when start to quote for the following error:

ERROR in ./demo03/src/app.vue
Module parse failed: /vue-tutorials/06.Router/demo03/src/app.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
 @ ./demo03/src/main.js 9:23-43



> loaders in webpack.config.js changed to rules

module: {
    loaders: [
        test: /\.vue$/,
        loader: 'vue'
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
        test: /\.json$/,
        loader: 'json'
        test: /\.html$/,
        loader: 'vue-html'
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: '[name].[ext]?[hash]'

webpack1.x -> Module. loaders changed the environment for module.rules
to start the project for the first time. Version conflicts seem to solve most problems!!

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

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

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

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



  export default {
    name: 'messageBox',
      return {
        title: '',
        content: '',
        isShowMessageBox: false,
        resolve: '',
        reject: '',
        promise: '' // 保存promise对象
    methods: {
        this.model.show = false;
    // 确定,将promise断定为resolve状态
    confirm: function () {
      this.isShowMessageBox = false;
    // 取消,将promise断定为reject状态
    cancel: function () {
      this.isShowMessageBox = false;
    // 弹出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(() => {
      }, 300);
    destroy: function () {

<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;



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.


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