使用vue 与 Element UI时踩过的坑

vue 与 Element UI踩坑

最近做的项目使用的是Element UI，在其中遇到了点问题，记下来留作备忘录：

---

出现的情况：

mac 从 svn 获取后 运行 npm run build 出现报错，其中有一段提示有 Permission denied 和 webpack-dev-server --inline --open --config build/webpack.dev.conf.js

解决方法：
可安装一遍 webpack-dev-server

> sudo npm i webpack-dev-server --save-dev
> sudo cnpm i --save node-notifier

---

出现的情况：
运行npm install 时报错，提示 npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is ins**
解决办法：
安装较低版本的 webpack，项目使用 3.6.0 可以，如若不行，可以试试 3.0.0

> npm uninstall webpack
> npm install webpack@3.6.0

---

出现的情况：
运行npm install 时报错，提示 Unexpected end of JSON input while parsing near '...hasum"
解决办法：
运行

> npm cache clean --force

---

出现的情况：
运行 npm run dev 时报错：提示为 Unknown plugin "component" specified in ...

解决办法：

> npm install babel-plugin-component -D

---

出现的情况：
运行 npm run dev 时报错：提示为 vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config

原因分析:

参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,

---

解决办法：
修改 webpack.base.conf.js 添加如下内容：

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
	context: path.resolve(__dirname, '../'),
	entry: {
    	app: './src/main.js'
  	},
	plugins: [
	    new VueLoaderPlugin()
	]
	// 添加内容的前后已省略
}

---

Dialog 在 iPad 上的显示问题

出现的情况：
项目有使用到 Element UI导航菜单，Dialog 弹层显示时，遮罩层只遮挡了右半部分，弹框只相对遮罩层居中，而不是相对整个页面居中。

原因：
因为项目在 iPad 上使用，下拉滑动时会有卡顿现象，在公用的样式上添加了一个CSS样式属性（如果谁知道为什么，还请评论告知）

html {
  -webkit-overflow-scrolling: touch;
}

解决方法：
在使用 Dialog 的地方添加 :modal-append-to-body='false' :append-to-body='true'，至于这两个属性的作用可查 说明文档

<el-dialog title="title" :visible.sync="dialogTableVisible"
    :modal-append-to-body='false' :append-to-body='true'>
</el-dialog>

build时资源路径不正确

出现的情况：
项目npm run dev时资源路径正确；在运行npm run build时，资源文件不能正常引入

解决办法：
1、在打包时需要使用相对路径来处理静态资源，更改build中资源发布路径配置（config/index.js，build对象下的 assetsPublicPath 属性）

 // 将 assetsPublicPath: '/'  改为  assetsPublicPath: './' 
 assetsPublicPath: './'

2、经过上一步骤，可以正常访问到 生成的 js 和 css 文件，但是有些静态图片还是访问不到的，此时更改静态资源路径配置（build/utils.js，generateLoaders 方法下的 publicPath 属性）

publicPath: "../../"

build之后，-webkit-box-orient样式不见了

出现的情况：
项目需要实现内容超过2行时，多余的内容隐藏，dev 的时候正常，build 之后就没用了。
原因（某篇文章描述）：autoprefixer不仅会帮你加-webkit-之类的prefixer，它还会帮你删除你自己写在 css/sass/less里的样式。
网上有两种解决办法：
1、关闭autoprefixer的自动删除功能，用注释包裹的中间这一句就不会被删除。

/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

备注一下：网上有些注释的开头是 /* autoprefixer: off */ ，没有感叹号，我在使用的时候是不行，加了感叹号才可以用。看到一篇文章上写 SASS 是不需要加感叹号的，因为项目使用的是 LESS ，也就没再深究了。

2、修改 build 文件夹下的 webpack.prod.conf.js 文件（没有尝试）

参考文章：-webkit-box-orient不见了， webkit 和 autoprefixer 的坑