vue同一项目搭建PC端和移动端

1. 新建一个vue项目

我们执行npm run serve 启动项目，在浏览器输入："localhost:8080"；正常的话然后我们会看到项目的启动页

2.把目录结构改为下图所示

3.更改路由(router)的文件

核心代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routesP = [{
  path: '/',
  name: 'Index',
  component: () => import( /* webpackChunkName: "about" */ '../views/pc/index.vue')
}]

const routesM = [{
  path: '/',
  name: 'Index',
  component: () => import( /* webpackChunkName: "about" */ '../views/mobile/index.vue')
}]

var routes = [];
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
  routes = routesM
} else {
  routes = routesP
}

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4.pc端和移动端分别打开网站

5.移动端配置vw适配

安装处理移动端适配各种依赖包

cnpm install cssnano postcss-aspect-ratio-mini postcss-cssnext postcss-import postcss-px-to-viewport postcss-url postcss-write-svg --save

6.新建postcss.config.js文件进行适配配置

核心配置

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {}, //主要用来处理元素容器宽高比
        "postcss-cssnext": {}, //该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
        "postcss-px-to-viewport": { //http://npm.taobao.org/package/postcss-px-to-viewport
            viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 
            viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 
            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） 
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw 
            selectorBlackList: ['.ignore', '.hairlines', ], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 
            exclude: [/node_modules/, /pc/], //If value is regexp, will ignore the matches files.If value is array, the elements of the array are regexp.
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 
            mediaQuery: false // 允许在媒体查询中转换`px`
        },
        "cssnano": { //主要用来压缩和清理CSS代码
            "cssnano-preset-advanced": {
                zindex: false,
                autoprefixer: false
            },
        }
    }
};

7.重启项目，此时mobile目录的文件就可以进行移动端的vw适配

8.GitHub地址

github.com/liyangju/vu…