readme
Showing
7 changed files
with
204 additions
and
43 deletions
1 | # vue-h5-template | 1 | # vue-h5-template |
2 | 2 | ||
3 | 基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 | 3 | 基于 vue-cli3.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装,构建手机端模板脚手架 |
4 | 4 | ||
5 | [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看 | ||
6 | |||
7 | #### 介绍 | ||
8 | [关于项目介绍](https://juejin.im/post/5cfefc73f265da1bba58f9f7) | 5 | [关于项目介绍](https://juejin.im/post/5cfefc73f265da1bba58f9f7) |
9 | 6 | ||
7 | [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看 | ||
8 | |||
10 | - Vue-cli4 | 9 | - Vue-cli4 |
11 | - VantUI组件按需加载 | 10 | - VantUI 组件按需加载 |
12 | - Sass | 11 | - Sass |
13 | - Webpack 4 | 12 | - Webpack 4 |
14 | - Vuex | 13 | - Vuex |
15 | - Axios封装 | 14 | - Axios 封装 |
16 | - rem适配方案 | 15 | - rem 适配方案 |
17 | - 多环境配置 | 16 | - 生产环境 cdn 优化首屏加速 |
18 | - 生产环境cdn优化首屏加速 | 17 | - babel 低版本浏览器兼容 |
19 | - babel低版本浏览器兼容 | 18 | - Eslint+Pettier 统一开发规范 |
20 | - Eslint+Pettier统一开发规范 | 19 | |
20 | <span id="top">目录</span> | ||
21 | |||
22 | - [√ 配置多环境变量](#env) | ||
23 | - [√ rem 适配方案](#rem) | ||
24 | - [√ 配置基础 vue.config.js](#base) | ||
25 | - [√ 配置 proxy 跨域](#proxy) | ||
26 | - [√ 修复 HMR(热更新)失效](#hmr) | ||
27 | - [√ 修复 Lazy loading routes Error: Cyclic dependency](#lazyloading) | ||
28 | - [√ 添加别名 alias](#alias) | ||
29 | - [√ 压缩图片](#compressimage) | ||
30 | - [√ 自动生成雪碧图](#spritesmith) | ||
31 | - [√ SVG 转 font 字体](#font) | ||
32 | - [√ 使用 SVG 组件](#svg) | ||
33 | - [√ 去除多余无效的 css](#removecss) | ||
34 | - [√ 添加打包分析](#analyze) | ||
35 | - [√ 配置 externals 引入 cdn 资源](#externals) | ||
36 | - [√ 多页面打包 multi-page](#multiple-pages) | ||
37 | - [√ 删除 moment 语言包](#moment) | ||
38 | - [√ 去掉 console.log](#log) | ||
39 | - [√ 利用 splitChunks 单独打包第三方模块](#splitchunks) | ||
40 | - [√ 开启 gzip 压缩](#gzip) | ||
41 | - [√ 开启 stylelint 检测 scss, css 语法](#stylelint) | ||
42 | - [√ 为 sass 提供全局样式,以及全局变量](#globalscss) | ||
43 | - [√ 为 stylus 提供全局变量](#globalstylus) | ||
44 | - [√ 预渲染 prerender-spa-plugin](#prerender) | ||
45 | - [√ 添加 IE 兼容](#ie) | ||
46 | - [√ 静态资源自动打包上传阿里 oss、华为 obs](#alioss) | ||
47 | - [√ 完整依赖](#allconfig) | ||
48 | |||
49 | ### <span id="env">✅ 配置多环境变量 </span> | ||
50 | |||
51 |   NODE_ENV 和 BASE_URL 是两个特殊变量,在代码中始终可用 | ||
52 | |||
53 | `package.json` 里的 `scripts` 配置 `serve` `stage` `build`,通过 `--mode xxx` 来执行不同环境 | ||
54 | |||
55 | - 通过 `npm run serve` 启动本地 , 执行 `development` | ||
56 | - 通过 `npm run stage` 打包测试 , 执行 `staging` | ||
57 | - 通过 `npm run build` 打包正式 , 执行 `production` | ||
58 | |||
59 | ```javascript | ||
60 | "scripts": { | ||
61 | "serve": "vue-cli-service serve --open", | ||
62 | "stage": "vue-cli-service build --mode staging", | ||
63 | "build": "vue-cli-service build", | ||
64 | } | ||
65 | ``` | ||
66 | |||
67 | ##### 配置介绍 | ||
68 | |||
69 |   以 `VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。 | ||
70 |   比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问 | ||
71 | |||
72 | 在项目根目录中新建.env | ||
73 | |||
74 | - .env.development 本地开发环境配置 | ||
75 | |||
76 | ```bash | ||
77 | NODE_ENV='development' | ||
78 | # must start with VUE_APP_ | ||
79 | VUE_APP_ENV = 'development' | ||
80 | |||
81 | ``` | ||
82 | |||
83 | - .env.staging 测试环境配置 | ||
84 | |||
85 | ```bash | ||
86 | NODE_ENV='production' | ||
87 | # must start with VUE_APP_ | ||
88 | VUE_APP_ENV = 'staging' | ||
89 | ``` | ||
90 | |||
91 | - .env.production 正式环境配置 | ||
92 | |||
93 | ```bash | ||
94 | NODE_ENV='production' | ||
95 | # must start with VUE_APP_ | ||
96 | VUE_APP_ENV = 'production' | ||
97 | ``` | ||
98 | |||
99 | 这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV `development` `staging` `production` | ||
100 | 变量我们统一在 src/config/env.\*.js 里进行管理。修改起来方便,不需要重启项目,符合开发习惯。 | ||
101 | |||
102 | config/index.js | ||
103 | |||
104 | ```javascript | ||
105 | // 根据环境引入不同配置 process.env.NODE_ENV | ||
106 | const config = require('./env.' + process.env.VUE_APP_ENV) | ||
107 | module.exports = config | ||
108 | ``` | ||
109 | |||
110 | 配置对应环境的变量,拿本地环境文件 `env.development.js` 举例,用户可以根据需求修改 | ||
111 | |||
112 | ```javascript | ||
113 | // 本地环境配置 | ||
114 | module.exports = { | ||
115 | title: 'vue-h5-template', | ||
116 | baseUrl: 'http://localhost:9018', // 项目地址 | ||
117 | baseApi: 'https://test.xxx.com/api', // 本地api请求地址 | ||
118 | APPID: 'xxx', | ||
119 | APPSECRET: 'xxx' | ||
120 | } | ||
121 | ``` | ||
122 | |||
123 | 根据环境不同,变量就会不同了 | ||
124 | |||
125 | ```javascript | ||
126 | // 根据环境不同引入不同baseApi地址 | ||
127 | import {baseApi} from '@/config' | ||
128 | console.log(baseApi) | ||
129 | ``` | ||
130 | |||
131 | [▲ 回顶部](#top) | ||
132 | |||
133 | ### <span id="rem">✅ rem 适配方案 </span> | ||
134 | |||
135 | 不用担心,项目已经配置好了 `rem` 适配, 下面仅做介绍: | ||
21 | 136 | ||
22 | #### 多环境 | 137 | Vant 中的样式默认使用`px`作为单位,如果需要使用`rem`单位,推荐使用以下两个工具: |
23 | 138 | ||
139 | - [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 `postcss` 插件,用于将单位转化为 `rem` | ||
140 | - [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 `rem` 基准值 | ||
24 | 141 | ||
25 | 之前写过一个多环境的方案,是基于vue-cli2.0的 [vue多环境配置方案-传送门](https://segmentfault.com/a/1190000019136606) | 142 | ##### PostCSS 配置 |
26 | 最近新的项目采用了vuecli3.0开始了一番折腾 | ||
27 | 143 | ||
28 | 这里参考了[vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) 基本思路不变 | 144 | 下面提供了一份基本的 `postcss` 配置,可以在此配置的基础上根据项目需求进行修改 |
29 | 在src的文件里新建config 根据不同的环境去引用不同的配置文件,不同的是在根目录下有三个设置环境变量的文件 | ||
30 | 这里可以参考vue-admin-template | ||
31 | 145 | ||
32 | #### rem适配方案 | 146 | ```javascript |
147 | // https://github.com/michael-ciniawsky/postcss-load-config | ||
148 | module.exports = { | ||
149 | plugins: { | ||
150 | autoprefixer: { | ||
151 | overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] | ||
152 | }, | ||
153 | 'postcss-pxtorem': { | ||
154 | rootValue: 37.5, | ||
155 | propList: ['*'] | ||
156 | } | ||
157 | } | ||
158 | } | ||
159 | ``` | ||
33 | 160 | ||
34 | 还是那句话,用vw还是用rem,这是个问题? | 161 | 更多详细信息: [vant](https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa) |
35 | 162 | ||
36 | 选用rem的原因是因为vant直接给到了这个适配方案,个人也比较喜欢这个方案 | 163 | **新手必看,老鸟跳过** |
37 | 164 | ||
38 | [vant](https://youzan.github.io/vant/#/zh-CN/quickstart) | 165 | 很多小伙伴会问我,适配的问题。 |
39 | 166 | ||
40 | #### 总结 | 167 | 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺面屏幕,其他机型适配。 |
168 | |||
169 | - 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。 | ||
170 | - 当`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 | ||
171 | |||
172 | 本案例采用 Vant 是基于 375 设计稿 , rootValue: 37.5。其他的你就可以根据你设计图,去做对应的设置了。 | ||
173 | |||
174 | 当然,想要撑满屏幕你可以使用100%,这里只是举例说明。 | ||
175 | |||
176 | ```html | ||
177 | <img class="image" src="https://imgs.solui.cn/weapp/logo.png" /> | ||
178 | |||
179 | <style> | ||
180 | /* rootValue: 75 */ | ||
181 | .image { | ||
182 | width: 750px; | ||
183 | height: 1334px; | ||
184 | } | ||
185 | /* rootValue: 37.5 */ | ||
186 | .image { | ||
187 | width: 375px; | ||
188 | height: 667px; | ||
189 | } | ||
190 | </style> | ||
191 | ``` | ||
192 | |||
193 | [▲ 回顶部](#top) | ||
194 | |||
195 | #### 总结 | ||
41 | 196 | ||
42 | 因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长 | 197 | 因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长 |
43 | 198 | ||
... | @@ -46,6 +201,7 @@ | ... | @@ -46,6 +201,7 @@ |
46 | 获取更多技术相关文章,关注公众号”前端女塾“。 | 201 | 获取更多技术相关文章,关注公众号”前端女塾“。 |
47 | 202 | ||
48 | 回复加群,即可加入”前端仙女群“ | 203 | 回复加群,即可加入”前端仙女群“ |
204 | |||
49 | <p> | 205 | <p> |
50 | <img src="./static/gognzhonghao.jpg" width="256" style="display:inline;"> | 206 | <img src="./static/gognzhonghao.jpg" width="256" style="display:inline;"> |
51 | </p> | 207 | </p> | ... | ... |
This diff could not be displayed because it is too large.
... | @@ -2,12 +2,12 @@ | ... | @@ -2,12 +2,12 @@ |
2 | "name": "vue-h5-template", | 2 | "name": "vue-h5-template", |
3 | "version": "2.0.0", | 3 | "version": "2.0.0", |
4 | "description": "A vue h5 template with Vant UI", | 4 | "description": "A vue h5 template with Vant UI", |
5 | "author": "Sunnie <s406803045@163.com>", | 5 | "author": "Sunnie <sunniejs@163.com>", |
6 | "private": true, | 6 | "private": true, |
7 | "scripts": { | 7 | "scripts": { |
8 | "serve": "vue-cli-service serve --open", | 8 | "serve": "vue-cli-service serve --open", |
9 | "build:prod": "vue-cli-service build", | 9 | "build": "vue-cli-service build", |
10 | "build:stage": "vue-cli-service build --mode staging", | 10 | "stage": "vue-cli-service build --mode staging", |
11 | "lint": "vue-cli-service lint" | 11 | "lint": "vue-cli-service lint" |
12 | }, | 12 | }, |
13 | "dependencies": { | 13 | "dependencies": { | ... | ... |
1 | // 本地 | 1 | // 本地环境配置 |
2 | module.exports = { | 2 | module.exports = { |
3 | title: 'vue-h5-template', | 3 | title: 'vue-h5-template', |
4 | baseUrl: 'https://test.xxx.com', // 项目地址 | 4 | baseUrl: 'http://localhost:9018', // 项目地址 |
5 | baseApi: 'https://test.xxx.com', // 本地api请求地址 | 5 | baseApi: 'https://test.xxx.com/api', // 本地api请求地址 |
6 | api: { | 6 | APPID: 'xxx', |
7 | base_api: 'https://xxx.xxx.com/admin', | 7 | APPSECRET: 'xxx' |
8 | common_api: 'https://xxx.xxx.com/common' | ||
9 | } | ||
10 | } | 8 | } | ... | ... |
... | @@ -2,9 +2,7 @@ | ... | @@ -2,9 +2,7 @@ |
2 | module.exports = { | 2 | module.exports = { |
3 | title: 'vue-h5-template', | 3 | title: 'vue-h5-template', |
4 | baseUrl: 'https://www.xxx.com/', // 正式项目地址 | 4 | baseUrl: 'https://www.xxx.com/', // 正式项目地址 |
5 | baseApi: 'https://test.xxx.com', // 正式api请求地址 | 5 | baseApi: 'https://www.xxx.com/api', // 正式api请求地址 |
6 | api: { | 6 | APPID: 'xxx', |
7 | base_api: 'https://xxx.xxx.com/admin', | 7 | APPSECRET: 'xxx' |
8 | common_api: 'https://xxx.xxx.com/common' | ||
9 | } | ||
10 | } | 8 | } | ... | ... |
1 | module.exports = { | 1 | module.exports = { |
2 | title: 'vue-h5-template', | 2 | title: 'vue-h5-template', |
3 | baseUrl: 'https://test.xxx.com', // 测试项目地址 | 3 | baseUrl: 'https://test.xxx.com', // 测试项目地址 |
4 | baseApi: 'https://test.xxx.com', // 测试api请求地址 | 4 | baseApi: 'https://test.xxx.com/api', // 测试api请求地址 |
5 | api: { | 5 | APPID: 'xxx', |
6 | base_api: 'https://xxx.xxx.com/admin', | 6 | APPSECRET: 'xxx' |
7 | common_api: 'https://xxx.xxx.com/common' | ||
8 | } | ||
9 | } | 7 | } | ... | ... |
... | @@ -46,7 +46,18 @@ module.exports = { | ... | @@ -46,7 +46,18 @@ module.exports = { |
46 | overlay: { | 46 | overlay: { |
47 | warnings: false, | 47 | warnings: false, |
48 | errors: true | 48 | errors: true |
49 | } | 49 | }, |
50 | // proxy: { | ||
51 | // //配置跨域 | ||
52 | // '/api': { | ||
53 | // target: "https://test.xxx.com", | ||
54 | // ws:true, | ||
55 | // changOrigin:true, | ||
56 | // pathRewrite:{ | ||
57 | // '^/api':'/' | ||
58 | // } | ||
59 | // } | ||
60 | // } | ||
50 | }, | 61 | }, |
51 | 62 | ||
52 | configureWebpack: config => { | 63 | configureWebpack: config => { | ... | ... |
-
Please register or sign in to post a comment