本文主要是介绍node vue 在操作中遇到的问题及解决方法，陆续补充，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

关于vue项目启动报错Error:Cannot find module 'array-includes'解决方法

找到项目中的node_modules文件 删除它；重新install安装所需依赖即可

node vue，用ts 写

ts监听数据变化 resource 这个就是要监听的

@Watch('resource')
  getC(){
    this.getOption()
    console.log("resource:" + this.resource);
  }

用avue上传不发送请求

要声明Window

import { AxiosStatic } from "axios";

declare global {
  interface Window {
      axios: AxiosStatic
  }
}

avue发送请求，路径不对

在avue.js中给值,avue.js是导入avue的

import axios from 'axios'
window.axios = axios.create({
    baseURL:'http://localhost:3009'
  })

Vue项目中eslint提示 'xxx' is defined but never used

在package.json，找到eslintConfig，在rules中加上"no-unused-vars": "off"

"rules": {
      "no-unused-vars": "off"
    }

设ESLint规则，忽略指定错误，例如no-console

在package.json，找到eslintConfig，在rules中加上 "no-console": "off"

"rules": {
      "no-console": "off"
    }

vue中使用jquery报错 $ is not defined

在package.json，找到eslintConfig，加上jquery

"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "$": true,
      "jquery":true
    },

'Swiper' is defined but never used no-unused-vars

在let Swiper = new Swiper();名字不要一样

let mySwiper = new Swiper();

.error Delete ␍ prettier/prettier

关掉prettier格式化，在.eslintrc.js rules中加上
"prettier/prettier": "off"

vue-cli -- build时自动清除console

1.方法一

安装 babel-plugin-transform-remove-console
修改 babel.config.js 文件

const plugins = []
if (process.env.NODE_ENV === 'production') {
  plugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins
}

2.方法二

安装terser-webpack-plugin
修改 babel.config.js 文件

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack: config => {
    config
      .optimization = {
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              compress: {
                drop_console: true
              }
            }
          })
        ]
      }
  }
}

vue-cli -- build时配置静态文件路径

1.新建vue.config.js
2.在里面配置信息

module.exports={
    outputDir:__dirname+'/dist',            //输出文件路径
    publicPath: process.env.NODE_ENV === 'production'       //静态文件路径
    ? './'
    : './'
}

vue 项目打包，防止源码暴露

在vue.config.js加上

productionSourceMap: false,

vue 赋值时，赋值视图不更新，用$set 也不更新，可以先用this.$delete删除，在this.$set赋值

this.$delete(this.formData,"src")
this.$set(this.formData, "src", this.formData.src)

修改table列里的数据时，修改数据，里面的内容也跟着变了，是因为直接赋值是浅拷贝，拷贝了地址，要用深拷贝才行，只拷贝数据

１.暴力转换

this.editForm = JSON.parse(JSON.stringify(row));

２.用ｅｓ６的结构赋值
this.from　＝　{...row}

vue3.0项目报错 Cannot find module 'vue-loader-v16/package.json'

1.更新npm

npm i -g npm

2.忽律可选依赖

npm install --no-optional --verbose

3.删除node_modules,在重新下载

nmp i

最好重新启动

Cannot read property '_withTask' of undefined

在Vue使用中报这个错，那一定是你 的引用找不到才会导致，

比如说，你的@click事件，如下：

<button @click="clickS" />

其实，你的 clickS方法并不存在，编译一开始没啥毛病，等你执行数据的时候，各种问题，如果页面数据量过大的时候，问题很难定位到哪里！
解决方法：
先写方法，后调用！

vue2.x 图片引入

1.如果static里有图片直接放入public里，可以直接引入
1.1 页面引入

<img src="static/img/1.jpg" alt="">

1.2 css引入

.main{
  background: url("static/img/main2.png") no-repeat center;
  background-size: 100%;
  height: 218px;
  width: 300px; 
}

2.直接放在外层，就在vue.config.js里配置别名

'@static': path.resolve(__dirname, 'static'),

2.1 页面引入

<img src="@static/img/1.jpg" alt="">

2.2 css引入

.main{
  background: url("~@static/img/main2.png") no-repeat center;
  background-size: 100%;
  height: 218px;
  width: 300px; 
}

vue引入外部jquery

1.直接引入外部jquery.js文件
注：/* eslint-disable*/ 这个得加，不然eslint检查会报错

import '@static/js/jquery.js' /* eslint-disable*/ 

然后页面使用console.log($('.main'))，
能使用就说明引入成功

这篇关于node vue 在操作中遇到的问题及解决方法，陆续补充的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！