Summary of Common Problems and Solutions in Vue Project Development

Solution to the incorrect static resource path after Vue Cli packaging

cli2 version:

Change the value of assetsPublicPath in config/index. js to './'.

build: {
 ...
 assetsPublicPath: './',
 ... 
}

cli3 version:

Create a new vue. config. js file in the root directory and add the following: (Modify this file if it already exists)

module.exports = {
 publicPath: '', //  Relative to  HTML  Pages (same directory) 
}

Vue cli 3 Error Report error: Unexpected console statement (no-console) Solution

"rules": {Add "no-console": "off"} in eslintConfig: {} in package. json file at the root of the project, as well as other similar errors

//  Example: 
"eslintConfig": {
  "root": true,
  "env": {
   "node": true
  },
  "extends": [
   "plugin:vue/essential",
   "eslint:recommended"
  ],
  "rules": {
   "no-console":"off"
  },
}

axios Cancel Request (E. G. User login invalidation, blocking other requests)

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.interceptors.request.use(
  config => {
    config.cancelToken = source.token; //  Global addition cancelToken
      return config;
    },
    err => {
      return Promise.reject(err);
    }
  );
/**  Set up response interception  **/
axios.interceptors.response.use(
  response => {
    //  Log-in invalidation 101
    if ( response.data.code===101) {
      source.cancel(); //  Cancel other ongoing requests 
      // some coding
    }
    return response;
  },
  error => {
    if (axios.isCancel(error)) { //  In case of canceling the request, the terminal Promise Call chain 
      return new Promise(() => {});
    } else {
      return Promise.reject(error);
    }
  }
);

vue-photo-preview Image Preview Failure Problem Record

<img
  class="pic"
  v-for="(item,index) of imgList"
  :key="index"
  :src="item.smallFileName"
  :large="item.fileName"
  preview="0"
  preview-text=" Symptom picture "
>

imgList is to call this. $previewRefresh () when obtaining data asynchronously. Refresh under reset 1, otherwise ~ ~ does not take effect

The above is the Vue project development FAQs and solutions summary of the details, more information about vue FAQs and solutions please pay attention to other related articles on this site!