vue cli3适配所有端方案的实现

yarn add postcss-px2rem

// css相关配置
  css: {
    // 启用 CSS modules
    modules: false,
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps"color: #ff0000">flexible.js

flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值 ===>设备缩放比
所以，在我们的html的header中，就不要之前配置的viewport的meta标签了


<meta name="viewport"
    content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">


这种标签flexble会自动帮我们加上。
下面附上修改完后的flexble脚本代码：


(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
  var isMobileDevice = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
  dpr = isMobileDevice "text-align: center">


最后在head添加js标签，引入它：


<script src="/UploadFiles/2021-04-02/flexible.js">

自此，项目就配置完了。

                                
                                

                                    vue,cli3适配所有端,vue,cli3适配 
                                

                                    标签：
                                        
vue,cli3适配所有端,vue,cli3适配