import { get, post } from '@/axios/http.js' function getIndex (params) { return get('/mock/5cb48c7ed491cd741c54456f/base/index', params) } function login(params) { return post('/mock/5cb48c7ed491cd741c54456f/base/login', params) } export { getIndex, login }
其他
去除console.log
装uglifyjs-webpack-plugin插件
// 上线压缩去除console等信息 config.plugins.push( new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true, drop_debugger: false, pure_funcs: ['console.log'] // 移除console } }, sourceMap: false, parallel: true }) )
设置alias目录别名
在项目中经常会引用各个地方的文件，配置后可以更加方便的引入了
config.resolve.alias .set('assets', '@/assets') .set('components', '@/components') .set('view', '@/view') .set('style', '@/style') .set('api', '@/api') .set('store', '@/store')
环境变量和模式
在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。
.env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
自定义的变量VUE_APP_开头，两个特殊的变量：
NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
BASE_URL - 会和 vue.config.js 中的 baseUrl 选项相符，即你的应用会部署到的基础路径。
如我们定义的.env
NODE_ENV = 'development' BASE_URL = 'https://www.jb51.net/' VUE_APP_BASE_API = ''
.env.production
NODE_ENV = 'production' BASE_URL = './' VUE_APP_BASE_API = 'https://easy-mock.com/'
在项目中可以用process.env.VUE_APP_*，如process.env.VUE_APP_BASE_API获取到定义的值
全局引入filter
把多个地方用到的过滤器写在一个js里面，复用代码。
// 过滤日期格式，传入时间戳，根据参数返回不同格式 const formatTimer = function(val, hours) { if (val) { var dateTimer = new Date(val * 1000) var y = dateTimer.getFullYear() var M = dateTimer.getMonth() + 1 var d = dateTimer.getDate() var h = dateTimer.getHours() var m = dateTimer.getMinutes() M = M >= 10 ? M : '0' + M d = d >= 10 ? d : '0' + d h = h >= 10 ? h : '0' + h m = m >= 10 ? m : '0' + m if (hours) { return y + '-' + M + '-' + d + ' ' + h + ':' + m } else { return y + '-' + M + '-' + d } } } export default { formatTimer }
main.js引入
import filters from './filters/index' // 注入全局过滤器 Object.keys(filters).forEach(item => { Vue.filter(item, filters[item]) })
使用
{{1555851774 | formatTimer()}}
vue中使用mock.js
查看我以前写的文章点击我
wepback的可视化资源分析工具插件---webpack-bundle-analyzer
用来分析哪些模块引入了哪些代码，进行有目的性的优化代码
在打包环境中加，使用命令npm run build --report
if (process.env.npm_config_report) { config.plugins.push(new BundleAnalyzerPlugin()) }
代码地址 项目地址: vue-cli3-H5