// src/main.js
function setHtmlFontSize() {
const baseSize = 100 // 由于浏览器字体最小为12px,故这个值要设置大一点,保证计算所得的html字体大于12px
const baseWidth = 375
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
const htmlDom = document.getElementsByTagName('html')[0]
htmlDom.style.fontSize = htmlWidth / baseWidth * baseSize + 'px'
}
setHtmlFontSize()
window.onresize = setHtmlFontSize // 动态设置html的font-size,样式单位使用rem,用于响应式开发(可通过调整baseSize和baseWidth去计算设计尺寸和rem的转换关系) // config/index.js
module.exports = {
dev: {
host: '192.168.1.100', // 修改为本机IP地址进行访问(如本机IP地址动态获取,每次启动时需重新配置,否则启动会报错)
},
build: {
assetsPublicPath: './', // 默认为根路径,修改为当前路径,防止打包后找不到引用的资源而不显示页面
productionSourceMap: false, // 打包时不生成map文件
}
} // build/utils.js
exports.cssLoaders = function (options) {
function generateLoaders (loader, loaderOptions) {
if (options.extract) {
return ExtractTextPlugin.extract({
publicPath: '../../' // 增加这一行,解决样式中引入相对路径背景图片,打包后路径出错找不到的问题
})
}
}
} // build/webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, {
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false, // 去除warning警告
drop_console: true, // 发布时去除console语句
pure_funcs: ['console.log'] // 配置发布时,不被打包的函数
}
},
}),
new HtmlWebpackPlugin({
minify: {
removeComments: false, // 打包保留注释
}),
]
}) // .eslintrc.js
module.exports = {
rules: {
'space-before-function-paren': 0, // 不在函数和括号之间加空格
'standard/computed-property-even-spacing': 0 // 允许两个[]不在同一行
}
} // build/webpack.base.conf.js
module.exports = {
externals: {
'AMap': 'AMap' // 引入高德地图对象,引入后 new AMap() 才不会报错
}
}

vue开发常用配置的更多相关文章

  1. weex和vue开发环境配置详解(配置系统变量等等)

    本文详细讲解如何搭建weex和vue开发环境 安装java 现在java安装包,网上的安装包都是国外的,很难下载下来 就用这个链接下载,亲测无毒,http://www.wmzhe.com/soft-3 ...

  2. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  3. VUE开发--环境配置(一)(转)

    无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627        https://www.jianshu.com/p/a494417def99?utm_so ...

  4. Sublime Text 3 web 开发常用配置

    前沿 Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器.Sublime Text是由程序员Jon Skinne ...

  5. vue开发环境配置

    一.开发工具 Visual Studio Code 二.环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nod ...

  6. vue开发常用插件

    dependencies axios // 用于请求数据 better-scroll // 用于处理页面列表的滚动,下拉刷新等 fastclick // 用于处理移动设备点击会有300毫秒延迟的问题 ...

  7. VS Code之Vue开发常用插件

    Auto Close Tag 自动补全html标签 Auto Rename Tag 同步更改html尾标签 ESLint ESlint语法提示 settings.json 文件 "eslin ...

  8. 记录一下,PC端vue开发常用框架,已经用过elementUI和iview 接下来尝试另一个Muse-UI 喜欢它的点击效果

    官网地址: https://muse-ui.org/#/zh-CN/installation

  9. Linux下开发常用配置

    JDK /etc/profile export JAVA_HOME=/usr/local/jdk1.8.0_181export CLASSPATH=.:$JAVA_HOME/jre/lib/rt.ja ...

随机推荐

  1. Spark RPC框架源码分析(三)Spark心跳机制分析

    一.Spark心跳概述 前面两节中介绍了Spark RPC的基本知识,以及深入剖析了Spark RPC中一些源码的实现流程. 具体可以看这里: Spark RPC框架源码分析(二)运行时序 Spark ...

  2. NPM -- 初探--01

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ...

  3. NVIDIA-SMI系列命令总结

    1  NVIDIA-SMI介绍 nvidia-smi简称NVSMI,提供监控GPU使用情况和更改GPU状态的功能,是一个跨平台工具,它支持所有标准的NVIDIA驱动程序支持的Linux发行版以及从Wi ...

  4. IBM developer:Kafka ACLs

    Overview In Apache Kafka, the security feature is supported from version 0.9. When Kerberos is enabl ...

  5. Vue组件之全局组件与局部组件

    1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...

  6. Ajax获取Response头信息

    $.ajax({ type: 'HEAD', // 获取头信息,type=HEAD即可 url : window.location.href, complete: function( xhr,data ...

  7. Shell中数组的使用

    数组是一个很有用的数据结构,经常使用的功能有初始化,遍历,查找,获取数组长度等操作 一.初始化 小括号中使用空格分开的数据结构就是一个数组,也可使用下标添加元素 arr=(1 'nice' '2day ...

  8. 01-Django介绍和安装

    01-Django介绍和安装 1.Django介绍 1.1介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的框架模式,即模型M(Model),视图V(View)和控 ...

  9. MVC设计思想

    MVC就是按照程序的功能将他们分成三个层,Model层(模型层),View层(显示层),Controller(控制层). Model层:可以细分为两层,分别是dao层.service层,这两层主要功能 ...

  10. MongoDB系列:五、MongoDB Driver使用正确的姿势连接复制集

    MongoDB复制集(Replica Set)通过存储多份数据副本来保证数据的高可靠,通过自动的主备切换机制来保证服务的高可用.但需要注意的时,连接副本集的姿势如果不对,服务高可用将不复存在. 使用复 ...