一、vue打包后css中引用的图片路径不正确
1:将绝对路径改为相对路径
打开webpack.prod.conf.js,找到output,添加publicPath :'./'
也可以 config文件夹下面的index.js 找到build下面的assetsPublicPath,值改为’./’
2:资源最终要打包到static文件夹下面,修改build下面的utils.js添加publicPath:’…/…/’, 如下图:
3:将绝对路径改为相对路径
在vue项目中使用了MUI框架,但是在npm run build进行打包的时候未生成dist文件,报错如下:
在mui.css文件中全局搜索svg,将外层的单引号改为双引号即可。
二、行内样式
<div class="picContent" v-bind:style="{background:'url(http://www.yunguoji.com.cn' + item.pic + ')', backgroundPosition:'center center', backgroundSize: 'cover'}"></div>
<div class="picContent" v-bind:style="{background:'url(http://www.yunguoji.com.cn' + item.pic + ') center', backgroundSize: 'cover'}"></div>
<div class="picContent" v-bind:style="{background:'url(http://www.yunguoji.com.cn' + item.pic + ') center / cover'}"></div>
三、vue解析富文本生成的html标签
用 v-html
四、路由跳转携带参数##
<li v-for="item in items">
<router-link :to="{ path: 'newsDetail', query: { id: item.id }}">
<div class="newsInfo">
<h4>{{item.title}}</h4>
<p>{{item.des}}</p>
</div>
</router-link>
</li>
//接收参数
this.id = this.$route.query.id;
五、vue是数据驱动的理念,但是如果用了动态追加内容的方式,新追加进来的元素样式不生效的问题
vue给每个元素都添加data-v-2a41d7aa ,新追加进来的元素却没有。对于动态追加的元素样式单独写一个style, 不加scoped.
六、Error: No PostCSS Config found in… 报错
项目在本地运行不报错,上传到 GitHub 之后,再 clone 到本地,执行:
npm install
安装完成之后再执行:
npm run dev
报错如上。
在项目根目录新建postcss.config.js文件,并对postcss进行配置:
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
再次执行 npm run dev 解决
七、使用sass
1:npm install node-sass --save
2:npm install --save-dev sass-loader style-loader css-loader
3:
vue中使用mui
1:mui中默认禁止了a标签的跳转。
在app.vue中添加:
2:mui中默认禁止click事件,使用的是tap事件
使用: