node vue 在操作中遇到的问题及解决方法，陆续补充

2022-03-30 15:00:23 阅读：190 来源： 互联网

标签：node vue console no js axios config 陆续

关于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事件，如下：

其实，你的 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,console,no,js,axios,config,陆续
来源： https://www.cnblogs.com/yizhenfeng-sandy/p/16077102.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9