Vue - 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-upload

action="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

回到顶部