内容简介:基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架帮你做好的配置有之前写过一个多环境的方案,是基于vue-cli2.0的
描述
基于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中引用
这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去config下新建三个对应的文件呢?
个人比较喜欢这种引入的方式而,比如我需要在文件引入api.common_api
import { api } from '@/config' // api const { common_api } = api 复制代码
373516084-5ce664bcb0207_articlex.png
rem适配方案
还是那句话,用vw还是用rem,这是个问题?
选用rem的原因是因为vant直接给到了这个适配方案,个人也比较喜欢这个方案
================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 加交流群,给我提意见,交流学习。
如果对你有帮助送我一颗小星星(づ ̄3 ̄)づ╭❤~
转载请联系作者!
以上所述就是小编给大家介绍的《vuecli3 vant rem 移动端框架方案》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 【移动端DL框架】当前主流的移动端深度学习框架一览
- 移动安全框架:MobSF
- 花椒移动端基础框架架构
- Hades:移动端静态分析框架
- Hades:移动端静态分析框架
- 移动APP质量优化框架 - Booster
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。