package.json
vue-cli-service serve 是vuecli4自帶的啟動本地開發(fā)環(huán)境的命令
vue-cli-service build 是vuecli4自帶的打包命令
--mode dev配合.env.dev文件可以改變NODE_ENV的值
"scripts": {
"serve-dev": "vue-cli-service serve --mode dev",
"serve-test": "vue-cli-service serve --mode test",
"build": "vue-cli-service build",
"build-dev": "vue-cli-service build --mode dev",
"build-test": "vue-cli-service build --mode test",
"build-test-analyzer": "vue-cli-service build --mode testAnalyzer"
}
.env.dev （這是完整的文件名）
NODE_ENV=dev
vue.config.js可以替換默認配置
1巩踏、devServer
devServer:{
proxy: process.env.NODE_ENV //通過NODE_ENV判斷不同環(huán)境的跨域代理
}
2樟蠕、chainWebpack
chainWebpack: config => {
config
.plugin('define')
.tap(args => {//DefinePlugin
Object.assign(args[0],process.env.NODE_ENV //通過NODE_ENV判斷不同環(huán)境的常量
return args
})
if(process.env.NODE_ANALYZER){//通過NODE_ANALYZER判斷是否啟用性能檢測
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end();
}
}
配置px轉rem
1、postcss.config.js东跪，將所有樣式文件的(propList: ['*'])像素轉為rem躁染，基準值（rootValue）為37.5
設計稿寬度x鸣哀，基準值y，轉換后樣式尺寸x/y（rem）
module.exports = {
plugins: {
'autoprefixer': {
},
'postcss-pxtorem': {
rootValue: 37.5,//結果為：設計稿元素尺寸/37.5吞彤，比如元素寬375px,最終頁面會換算成 10rem
propList: ['*']
}
}
}
2我衬、flexible.js判斷終端寬度并設置根節(jié)點（html）的front-size，因當前頁面上的尺寸單位都為rem饰恕，整個頁面的尺寸會根據根節(jié)點的變化而變化挠羔，換而言之，整個頁面的尺寸變化根據終端寬度而變化埋嵌。
屏幕寬度a褥赊，根節(jié)點front-size為b；因設計稿寬度等于屏幕寬度莉恼，因1rem1front-size=;(x/y)b=a
//在main.js中引入
import './util/flexible.js';
