1.全局配置css预编译语言,如stylus
前提需先安装stylus,
1.1 npm i stylus-loader
1.2 npm i stylus
1.3在build/utils.js中更改添加如下(theme.styl为stylus文件,路径请根据实际更改)
2.配置px2rem
2.1 npm i px2rem-loader
2.2 在build/utils.js中更改添加
const px2remLoader = {
loader:'px2rem-loader',
options: {
remUnit:16
}
}
找到generateLoaders函数更改
const loaders = options.usePostCSS ? [cssLoader,postcssLoader] : [cssLoader]为
const loaders = options.usePostCSS ? [cssLoader,postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
2.3在index.html中引入适配js
<script>
<!--引入px2rem-loader后自动将px转化rem-->
(function (win,doc) {
function setSize() {
doc.documentElement.style.fontSize =16*document.documentElement.clientWidth/375+'px'
}
setSize()
win.addEventListener('resize',setSize,false)
})(window,document)
</script>
2.2 2.33.vue跨域配置
3.1在config/index.js中更改
3.13.2在config/dev.env.js中更改
3.23.3在config/prod.env.js中更改
3.33.4在main.js中添加Vue.prototype.baseURL =process.env.API_HOST
3.5请求数据时(如上一步API_HOST配置为http://baidu.com,请求数据的接口为http://baidu.com/h.php,则以下可写为`${this.baseURL}/h.php`,注意这里的``不是单引号,是tab键上面那个)
网友评论