詳解Vue-cli webpack行動端自動化建置rem問題-js教程-PHP中文網

首頁

web前端

js教程

詳解Vue-cli webpack行動端自動化建置rem問題

亚连

May 26, 2018 pm 02:04 PM

vue-cli web webpack

這篇文章主要介紹了詳解Vue-cli webpack行動端自動化建置rem問題，現在分享給大家，也給大家做個參考。

相信很多小夥伴想著自己的行動裝置專案能夠自動轉換為rem，這才符合前端的潮流，如果用自己手寫或編輯器外掛來改動十分不方便還容易出錯，我在網路上找了很多的方法發現以下問題：

1 照著舊的影片教學去弄，發現node npm webpack px2rem的各種外掛程式版本都不一樣，根本沒用

#2 網路上的教學缺斤少倆，不完整，搞得我整了半天搞不定，想想乾脆手動vscode 的cssrem設定算了，但老子還是不服氣，東拼西湊還是整出來了，最後還是研究出了以下方法希望對大家的行動端自動化建置rem有幫助

1 安裝vue-cli這個就不多說了，大家都應該會

2 安裝與設定px2rem-loader(這裡沒有用postcss試過了很多問題還是決定用這個)

第一步：npm install px2rem-loader

#第二部: webpack.base.conf.js下添加對象，這裡我用的是sass,用其他的按照下面規律改就行了，相信都看得懂

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: &#39;style-loader!css-loader!sass-loader!less-loader!postcss-loader&#39;
   }
  ]
 }
}

第三步： webpack.dev.conf.js下的plugins加入一個東西，大家一定要注意remUnit這個屬性，就是在蘋果5情況下為40px，我這裡定為40，也有人定為80，我在這裡40是為了配合hotcss使用下面我會講到

 plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
   vue: {
    postcss: [require(&#39;postcss-px2rem&#39;)({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

##第四部：這是多人不知道的，很多人就是差這一步，utils.js下找到const cssLoader加上?importLoaders=1

 const cssLoader = {
  loader: &#39;css-loader?importLoaders=1&#39;,
  options: {
   minimize: process.env.NODE_ENV === &#39;production&#39;,
   sourceMap: options.sourceMap
  }
 }

到這裡為止安裝就完成了

輸入font-size:40px

輸出font-size:1rem (在iphone下)

3 我們都知道裝置的像素比不一樣的，所以我們用hotcss來調整設備的像素比鏈接

我放在了src/assets/js/裡面大家可根據習慣來

#引入方法，自己定義什麼名字都行，這裡我吧hotcss.js改為了viewport.js

module.exports = {
 entry: {
  app: &#39;./src/main.js&#39;,
  rem: &#39;./src/assets/js/viewport.js&#39;
 }
}

上面是我整理給大家的，希望今後會對大家有幫助。

ajax讀取properties資源檔案資料的方法

Ajax方式實作定期更新頁面某塊內容的方法

Ajax取得回應內容長度的方法

以上是詳解Vue-cli webpack行動端自動化建置rem問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Laravel 教程

1604

PHP教程

1509

276

Related knowledge

VUE3入門教學：使用Webpack進行打包和構建 Jun 15, 2023 pm 06:17 PM

Vue是一款優秀的JavaScript框架，它可以幫助我們快速建立互動性強、高效性好的Web應用程式。 Vue3是Vue的最新版本，它引入了許多新的功能和功能。 Webpack是目前最受歡迎的JavaScript模組打包器和建置工具之一，它可以幫助我們管理專案中的各種資源。本文就為大家介紹如何使用Webpack打包和建構Vue3應用程式。 1.安裝Webpack

Java API 開發中使用 Jetty7 進行 Web 伺服器處理 Jun 18, 2023 am 10:42 AM

JavaAPI開發中使用Jetty7進行Web伺服器處理隨著互聯網的發展，Web伺服器已經成為了應用程式開發的核心部分，同時也是許多企業所關注的焦點。為了滿足日益增長的業務需求，許多開發人員選擇使用Jetty進行Web伺服器開發，其靈活性和可擴展性受到了廣泛的認可。本文將介紹如何在JavaAPI開發中使用Jetty7進行We

web標準是什麼東西 Oct 18, 2023 pm 05:24 PM

Web標準是一組由W3C和其他相關組織制定的規範和指南，它包括HTML、CSS、JavaScript、DOM、Web可訪問性和性能優化等方面的標準化，透過遵循這些標準，可以提高頁面的兼容性、可訪問性、可維護性和效能。 Web標準的目標是使Web內容能夠在不同的平台、瀏覽器和裝置上一致地展示和交互，提供更好的使用者體驗和開發效率。

Web 端即時防擋臉彈幕（基於機器學習） Jun 10, 2023 pm 01:03 PM

防擋臉彈幕，即大量彈幕飄過，但不會遮擋視訊畫面中的人物，看起來像是從人物背後飄過去的。機器學習已經火了好幾年了，但很多人都不知道瀏覽器中也能運行這些能力；本文介紹在視頻彈幕方面的實踐優化過程，文末列舉了一些本方案可適用的場景，期望能開啟一些腦洞。 mediapipeDemo（https://google.github.io/mediapipe/）展示主流防擋臉彈幕實現原理點播up上傳視訊伺服器後台計算提取視訊畫面中的人像區域，轉換成svg儲存用戶端播放視訊的同時，從伺服器下載svg與彈幕合成，人像

web是什麼意思 Jan 09, 2024 pm 04:50 PM

web是全球廣域網，也稱為萬維網，是互聯網的一種應用形式。 Web 是一種基於超文本和超媒體的資訊系統，它允許使用者透過超連結在不同的網頁之間跳轉，從而瀏覽和獲取資訊。 Web 的基礎是互聯網，它使用統一、標準化的協定和語言，使得不同電腦之間能夠進行資料交換和資訊共享。

如何使用Golang實作網頁應用程式的表單驗證 Jun 24, 2023 am 09:08 AM

表單驗證是Web應用程式開發中非常重要的環節，它能夠在提交表單資料之前對資料進行有效性檢查，避免應用程式出現安全漏洞和資料錯誤。使用Golang可以輕鬆實現網頁應用程式的表單驗證，本文將介紹如何使用Golang來實作網頁應用程式的表單驗證。一、表單驗證的基本要素在介紹如何實作表單驗證之前，我們需要知道表單驗證的基本要素是什麼。表單元素：表單元素是指

Golang學習之Web應用程式的表單驗證實踐 Jun 24, 2023 pm 03:07 PM

在網路開發中，表單驗證是一個極為關鍵的部分。表單驗證可以有效保護資料的安全性，防止非法使用者的攻擊和惡意操作。在Golang中，表單驗證技術也應用廣泛，特別是在網路應用程式中。本文將介紹Golang中網路應用程式的表單驗證實務。一、表單驗證的基本原理在Web應用程式中，表單驗證的基本原理是在Web頁面提交資料之前進行資料的檢查和驗證。這些數據可能是用戶

如何從駕駛艙Web使用者介面啟用管理訪問 Mar 20, 2024 pm 06:56 PM

Cockpit是一個面向Linux伺服器的基於Web的圖形介面。它主要是為了使新用戶/專家用戶更容易管理Linux伺服器。在本文中，我們將討論Cockpit存取模式以及如何從CockpitWebUI切換Cockpit的管理存取。內容主題：駕駛艙進入模式查找當前駕駛艙訪問模式從CockpitWebUI啟用Cockpit的管理訪問從CockpitWebUI禁用Cockpit的管理訪問結論駕駛艙進入模式駕駛艙有兩種訪問模式：受限訪問：這是駕駛艙的默認訪問模式。在這種存取模式下，您無法從駕駛艙Web用戶

See all articles

詳解Vue-cli webpack行動端自動化建置rem問題

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題