vue 项目移动端使用淘宝自适应插件 环境配置

 

## 页面自适应 选用淘宝 lib-flexible

> 安装lib-flexible

```

npm install lib-flexible --save

 

在main.js页面引入import ‘lib-flexible‘;

```

> 安装 px2rem-loader

```

npm install px2rem-loader

```

> 配置px2rem-loader

```

在build/untils.js文件里配置如下：

我们只需要在cssLoader后面加上一个px2remLoader即可，px2rem-loader的remUnit 选项意思是1rem=多少像素，结合lib-flexible，我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10，这里我们假设设计稿的宽度为750px ,并将px2remLoader 放进loaders数组中

var px2remLoader = {

loader: 'px2rem-loader',

options: {

remUnit: 75

}

}

function generateLoaders (loader, loaderOptions) {

var loaders = [cssLoader,px2remLoader] 这里加入px2remLoader

```

 

 

## 环境基础配置

> build文件夹 ~ webpack.base.conf.js 文件配置文件引用别名

```

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

'components': resolve('src/components'),

'common': resolve('src/common'),

}

}

```

> 打包后图片 字体 引入路径问题 引用相对路径 在config文件夹 修改index.js代码 如下：修改 assetsPublicPath: '/',

 

```

build: {

env: require('./prod.env'),

index: path.resolve(__dirname, '../dist/index.html'),

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',

assetsPublicPath: './',

productionSourceMap: true,

```

> 打包后图片 字体 引入路径问题 引用相对路径 在build文件夹 修改utils.js代码 如下：增加 publicPath: '../../' 这一行

```

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader',

publicPath: '../../'

})

```

> .Vue 文件模板

```

<template>

<div class="">

 

</div>

</template>

 

<script>

 

</script>

 

<style lang="stylus" rel="stylesheet/stylus" scoped>

 

</style>

```

 

## 移动端部分手机浏览器（如UC浏览器） 边框不兼容 使用伪类仿造

```

.border-1px { //下边框

position: relative

&::after {

display: block;

position: absolute;

left: 0;

bottom: 0;

width: 100%;

border-top: 1px solid #ccc;

content: ' ';

}

}

```

转载于:https://www.cnblogs.com/xzma/p/7852064.html