【求助】移动端和PC端在同一个项目中怎么做适配

Question

一个官网，有PC端和移动端我想访问网站的时候，判断是移动端还是PC端，返回不同的页面；
现在用的自适应插件是 postcss-pxtorem ，但 postcss.config.js 中无法访问到 window
如何做不同端的自适应的配置呢？

Answer 1

判断是移动端还是PC端，返回不同的页面,建议在服务端针对请求头做文章,如nginx中:适配PC和移动环境

Answer 2

1. 直接在路由守卫beforeRouteEnter中判断userAgent,然后跳转到对应的页面。
2. 交给nginx去判断h5还是pc端，跳转到对应目录。

Answer 3

你可以创建两个配置文件 postcss.config.mobile.js 和 postcss.config.desktop.js。然后在构建脚本里，根据需要选择使用哪一个配置文件。
Webpack，你可以在 webpack.config.js 文件里设置：

const isMobile = process.env.PLATFORM === 'mobile';

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: require(`./postcss.config.${isMobile ? 'mobile' : 'desktop'}.js`),
            },
          },
        ],
      },
      // ...
    ],
  },
  // ...
};

然后在命令行中设置 PLATFORM 环境变量来选择使用哪一个配置文件。：

`PLATFORM=mobile npm run build
`
或者：

PLATFORM=desktop npm run build