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列里的数据时,修改数据,里面的内容也跟着变了,是因为直接赋值是浅拷贝,拷贝了地址,要用深拷贝才行,只拷贝数据
1.暴力转换
this.editForm = JSON.parse(JSON.stringify(row));
2.用es6的结构赋值
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,console,no,js,axios,config,陆续 来源: https://www.cnblogs.com/yizhenfeng-sandy/p/16077102.html