vuecli3 vant rem 移动端框架方案
2019-06-11 本文已影响57人
程序媛花花
描述
基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架
帮你做好的配置有
- vuecli3.0
- 多环境开发
- axios封装
- rem适配方案
- 生产环境cdn优化首屏加速
- babel低版本浏览器兼容
- 环境发布脚本
...
可以上手直接写代码
多环境开发
之前写过一个多环境的方案，是基于vue-cli2.0的vue多环境配置方案-传送门
最近新的项目采用了vuecli3.0开始了一番折腾
这里参考了 vue-admin-template基本思路不变
在src的文件里新建config 根据不同的环境去引用不同的配置文件，不同的是在根目录下有三个设置环境变量的文件
这里可以参考vue-admin-template
这里要注意的是，要以VUE_APP_前缀设置，才可以在vue中引用
2499536341-5cf8b55a55113_articlex.png
这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去config下新建三个对应的文件呢？
个人比较喜欢这种引入的方式而，比如我需要在文件引入api.common_api
import { api } from '@/config'
// api
const { common_api } = api
373516084-5ce664bcb0207_articlex.png
rem适配方案
还是那句话，用vw还是用rem，这是个问题？
选用rem的原因是因为vant直接给到了这个适配方案，个人也比较喜欢这个方案
2335055831-5ce660ae6d3ec_articlex.png
================2019.06.06 更新===========================
生产环境使用CDN
可以使用cdn提高速度，这里要在vue.config.js需要配置externals,修改public 下的index.html
vue.config.js
'use strict'
const path = require('path')
const defaultSettings = require('./src/config/index.js')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title || 'vue mobile template' // page title
const port = 9018 // dev port
const externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
vant: 'vant',
axios: 'axios',
'crypto-js': 'CryptoJS'
}
// cdn
const cdn = {
// 开发环境
dev: {
css: [],
js: [
'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js'
]
},
// 生产环境
build: {
css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'],
js: [
'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js',
'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js',
'https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js'
]
}
}
module.exports = {
publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', // 需要区分生产环境和开发环境，不然build会报错
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
}
},
configureWebpack: config => {
// 为生产环境修改配置...
if (process.env.NODE_ENV === 'production') {
// externals里的模块不打包
Object.assign(config, {
name: name,
externals: externals
})
}
// 为开发环境修改配置...
if (process.env.NODE_ENV === 'development') {
}
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// alias
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'))
/**
* 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改
*/
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn.build
}
if (process.env.NODE_ENV === 'development') {
args[0].cdn = cdn.dev
}
return args
})
// set preserveWhitespace
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
config
// https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === 'development', config =>
config.devtool('cheap-source-map')
)
config.when(process.env.NODE_ENV !== 'development', config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [
{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}
])
.end()
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
// elementUI: {
// name: 'chunk-elementUI', // split elementUI into a single package
// priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
// test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
// },
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
})
}
}
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- built files will be auto injected -->
</body>
</html>
babel转 ES5
因为babel研究的还不够透彻，所以采用了最笨的方法直接引入babel-polyfill,生产环境和开发环境都直接引用cdn js
babel.config.js 添加 useBuiltIns: 'entry'
babel.config.js
module.exports = {
presets: [['@vue/app', { useBuiltIns: 'entry' }]],
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true
},
'vant'
]
]
}
总结
因为项目刚刚构建起来，后面还会持续更新，实际使用过程中一定还有很多问题，如果文章中有错误希望能够被指正，一起成长
关于我
您可以扫描添加下方的微信并备注 Soul 加交流群，给我提意见，交流学习。
mine.png
如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～
转载请联系作者！
