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: ' ';

}

}

```