Vue - Vue问题汇总
mac用npm安装gyp报错:NPM Error:gyp: No Xcode or CLT version detected!
执行如下命令
sudo rm -rf $(xcode-select -print-path)xcode-select --install
node-sass 及 node-gyp 安装失败
报错如下
...gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
...
npm ERR! node-sass@4.7.2 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
...
node-sass 以及 node-gyp 在安装的时候,会自动去找国外的源进行下载,而这个源并不是非常的稳定。请注意,这个不稳定并不全是由于国内墙的存在造成的,因为就算你开了 VPN,这个问题还是会发生。
所以最好的解决办法就是用淘宝镜像 cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
ERROR in Cannot find module 'node-sass'
找不到node-sass模块。这是因为cnpm安装导致的,换成npm安装,或者执行下列命令:
cnpm install node-sass@latest
Node Sass does not yet support your current environment
说明node sass版本在当前环境运行不了,解决方法如下:
卸载当前版本node sass:
npm uninstall --save node-sass
重新安装node sass:
npm install --save node-sass
ENOENT: no such file or directory, scandir
安装node-sass报错,执行下列命令:
npm rebuild node-sass
vue+echarts 百度地图上线后BMap api is not loaded
注意两点
1.引入优化
// 如果是 webpack 打包,也可以 require 引入require('echarts');
require('echarts/extension/bmap/bmap');
2.注意生产环境打包时,也要配置AK
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>
element-ui中的upload组件增加请求头token
<el-uploadaction="http://ip:port/uploadFile";
multiple
:limit="3"
:headers="myHeaders" //注:此处也可以使用computed来传动态值
:on-success="suc">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
...
data: {
myHeaders: {
token: "324234234234324343pz9cvbg3Rw="
}
},
element-ui弹窗的this.$confirm框报错Uncaught (in promise) cancel
this.$confirm('确定?', '提示', {type: 'warning'}).then(() => {
this.$message({
message: '操作成功',
type: 'success'
});
})
.catch(() => {}); //一定别忘了这个
VUE关闭extra代码规范
useEslint: ture,改成 useEslint: false,
解决vue开发环境中一直发http://localhost:8080/sockjs-node/info?t=xxx 请求
sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。
- 服务端:sockjs-node(https://github.com/sockjs/soc...)
- 客户端:sockjs-client(https://github.com/sockjs/soc...)
开发时,如果变更网络环境(如切换wifi导致开发服务器的IP地址更换),服务器不知道如何确定访问源,就有可能造成上述情况,解决办法如下:
办法一
找到/node_modules/sockjs-client/dist/sockjs.js,找到代码的 1605行
try {// self.xhr.send(payload); 把这里注掉
} catch (e) {
self.emit('finish',0,'');
self.\_cleanup(false);
}
办法二
打开/package-lock.json,关闭开发环境时的 sockjs 接口
elementUI el-dialog弹框居中
如下样式可以让这个弹框既能在视窗居中,又能在内容过多时防止弹框大小超出视窗,还能把滚动限制在body内部从而使得头和尾始终可见,再也不用滚上滚下去找各种标题和按钮了。
.el-dialog {display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height:850px;
width: 550px;
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
Mac下安装NVM
NVM项目地址:https://github.com/nvm-sh/nvm
运行安装命令(随着版本更新可能会有变化):
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
打开 ~/.bash_profile 文件,添加环境变量,保存并退出:
export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
运行以下命令使配置生效:
source .bash_profile
常用命令:
- nvm install stable 安装最新稳定版 node
- nvm install <version> 安装指定版本,如:安装v4.4.0,nvm install v4.4.0
- nvm uninstall <version> 删除已安装的指定版本,语法与install类似
- nvm use <version> 切换使用指定的版本node
- nvm ls 列出所有安装的版本
- nvm alias default <version> 如: nvm alias default v11.1.0
NVM报错:You need to run "nvm install N/A" to install it before using it.
执行命令: nvm ls 查看"default" Node 版本,这是引起报错的原因
执行命令:nvm alias default node
执行命令:nvm ls 查看
Vue打包后字体文件路径错误
打包后,css里加载的font文件路径变成了:/static/css/static/fonts/xxx,期望的应该是/static/fonts/xxx。
修改方式:在build/utils.js 37行左右的ExtractTextPlugin.extract里加上 publicPath: '../../':
function generateLoaders (loader, loaderOptions) {const loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
//在这里加
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
以上是 Vue - Vue问题汇总 的全部内容, 来源链接: utcz.com/z/376820.html