Vue3:腳手架配置 https://blog.csdn.net/weixin_41424247/article/details/80867351 與原來的vue cli 2.x版本不同的是：如果使用最新版本的@vue/cli初始化vue項目時，通常看不到webpack的配製文件。而在原來的2.x版 ...
Vue3:腳手架配置
https://blog.csdn.net/weixin_41424247/article/details/80867351
與原來的vue-cli 2.x版本不同的是：如果使用最新版本的@vue/cli初始化vue項目時，通常看不到webpack的配製文件。而在原來的2.x版本，我們可以在utils.js中輕鬆配製px2rem相關配置。
1. 安裝
安裝lib-flexible：
npm i -S lib-flexible
npm i -D postcss postcss-loader postcss-px2rem
2. 在項目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
3.在項目public目錄的index.html頭部加入手機端適配的meta的代碼
4.在根目錄下創建配製文件vue.config.js，並配製如下信息
vue.config.js
module.exports = {
css: {
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
plugins: [require('postcss-px2rem')({
remUnit: 75
})]
}
}
}
}res:
註:
1.remUnit在這裡要根據lib-flexible的規則來配製，如果您的設計稿是750px的，用75就剛剛好。
2.當你遇到1px的邊框時，通常容易發現頁面缺失部分邊框，這時你可以使用/no/語法來屏蔽該屬性轉換，例如
border: 1px solid red; /*no*/3.由於字體的特殊性，我們在編譯font-size屬性時，通常不使用rem單位，這時候你可以這樣使用：
font-size: 24px; /*px*/原生配置:
1. 安裝
安裝css文件打包插件
cnpm i -D MiniCssExtractPlugin css-loader
安裝lib-flexible：
cnpm i -S lib-flexible
安裝postcss和postcss-loader和postcss-px2rem：
cnpm i -D postcss postcss-loader postcss-px2rem
2. 在項目入口文件main.js中引入lib-flexible
main.js
import'lib-flexible/flexible.js';
3.在項目public目錄的index.html頭部加入手機端適配的meta的代碼
4. 在根目錄下創建配製文件vue.config.js，並配製如下信息
vue.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const px2rem = require('postcss-px2rem');
function resolve (dir) {
return path.join(__dirname,dir)
}
module.exports= {
mode:"development",
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,"./dist"),
filename:"main.bundle.js"
},
resolve :{
extensions: ['.js', '.vue', '.json',".css"],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
devServer:{
contentBase:"./dist",
port:9000,
open:true,
},
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:"./public/index.html",
filename:"index.html"
}),
new CleanWebpackPlugin(['./dist']),
new MiniCssExtractPlugin({
filename: "color.css",
// chunkFilename: "[id].css"
})
],
module:{
rules:[
{ test: /\.vue$/, loader: 'vue-loader'},
//{test:/\.css$/,use:['style-loader','css-loader']},
{
test:/\.css$/,
exclude:/node_modules/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:"postcss-loader",
options:{
plugins:()=>[
px2rem({remUnit: 75})
]
}
},
]
},
{
test:/\.js$/,
exclude:/(node_modules|bower_components)/,
use:['babel-loader']
},
{
test:/(png|gif|jp(e)?g)$/,
use:[
{
loader:'url-loader',
options:{
limit:8192
}
}
]
}
]
}
}res:
參考資料:
postcss-px2rem: https://www.npmjs.com/package/postcss-px2rem
mini-css-extract-plugin:https://webpack.js.org/plugins/mini-css-extract-plugin/#src/components/Sidebar/Sidebar.jsx
https://blog.csdn.net/mx18519142864/article/details/80771700
{
test: /\.css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
// "postcss-loader"
{
loader:"postcss-loader",
options:{
plugins:()=>[
px2rem({remUnit: 75})
]
}
},
]
},
