Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
xqz
/
dianDemo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
ce8557ef
authored
2020-04-15 17:37:14 +0800
by
sunnie
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
readme
1 parent
18372b1e
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
204 additions
and
43 deletions
README.md
package-lock.json
package.json
src/config/env.development.js
src/config/env.production.js
src/config/env.staging.js
vue.config.js
README.md
View file @
ce8557e
# vue-h5-template
基于
vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios
封装,构建手机端模板脚手架
基于
vue-cli3.0+webpack 4+vant ui + sass+ rem 适配方案+axios
封装,构建手机端模板脚手架
[
demo
](
https://solui.cn/vue-h5-template/#/
)
建议手机端查看
#### 介绍
[
关于项目介绍
](
https://juejin.im/post/5cfefc73f265da1bba58f9f7
)
[
demo
](
https://solui.cn/vue-h5-template/#/
)
建议手机端查看
-
Vue-cli4
-
VantUI
组件按需加载
-
VantUI
组件按需加载
-
Sass
-
Webpack 4
-
Vuex
-
Axios封装
-
rem适配方案
-
多环境配置
-
生产环境cdn优化首屏加速
-
babel低版本浏览器兼容
-
Eslint+Pettier统一开发规范
-
Axios 封装
-
rem 适配方案
-
生产环境 cdn 优化首屏加速
-
babel 低版本浏览器兼容
-
Eslint+Pettier 统一开发规范
<span
id=
"top"
>
目录
</span>
-
[
√ 配置多环境变量
](
#env
)
-
[
√ rem 适配方案
](
#rem
)
-
[
√ 配置基础 vue.config.js
](
#base
)
-
[
√ 配置 proxy 跨域
](
#proxy
)
-
[
√ 修复 HMR(热更新)失效
](
#hmr
)
-
[
√ 修复 Lazy loading routes Error: Cyclic dependency
](
#lazyloading
)
-
[
√ 添加别名 alias
](
#alias
)
-
[
√ 压缩图片
](
#compressimage
)
-
[
√ 自动生成雪碧图
](
#spritesmith
)
-
[
√ SVG 转 font 字体
](
#font
)
-
[
√ 使用 SVG 组件
](
#svg
)
-
[
√ 去除多余无效的 css
](
#removecss
)
-
[
√ 添加打包分析
](
#analyze
)
-
[
√ 配置 externals 引入 cdn 资源
](
#externals
)
-
[
√ 多页面打包 multi-page
](
#multiple-pages
)
-
[
√ 删除 moment 语言包
](
#moment
)
-
[
√ 去掉 console.log
](
#log
)
-
[
√ 利用 splitChunks 单独打包第三方模块
](
#splitchunks
)
-
[
√ 开启 gzip 压缩
](
#gzip
)
-
[
√ 开启 stylelint 检测 scss, css 语法
](
#stylelint
)
-
[
√ 为 sass 提供全局样式,以及全局变量
](
#globalscss
)
-
[
√ 为 stylus 提供全局变量
](
#globalstylus
)
-
[
√ 预渲染 prerender-spa-plugin
](
#prerender
)
-
[
√ 添加 IE 兼容
](
#ie
)
-
[
√ 静态资源自动打包上传阿里 oss、华为 obs
](
#alioss
)
-
[
√ 完整依赖
](
#allconfig
)
### <span id="env">✅ 配置多环境变量 </span>
  
NODE_ENV 和 BASE_URL 是两个特殊变量,在代码中始终可用
`package.json`
里的
`scripts`
配置
`serve`
`stage`
`build`
,通过
`--mode xxx`
来执行不同环境
-
通过
`npm run serve`
启动本地 , 执行
`development`
-
通过
`npm run stage`
打包测试 , 执行
`staging`
-
通过
`npm run build`
打包正式 , 执行
`production`
```
javascript
"scripts"
:
{
"serve"
:
"vue-cli-service serve --open"
,
"stage"
:
"vue-cli-service build --mode staging"
,
"build"
:
"vue-cli-service build"
,
}
```
##### 配置介绍
  
以
`VUE_APP_`
开头的变量,在代码中可以通过
`process.env.VUE_APP_`
访问。
  
比如,
`VUE_APP_ENV = 'development'`
通过
`process.env.VUE_APP_ENV`
访问
在项目根目录中新建.env
-
.env.development 本地开发环境配置
```
bash
NODE_ENV
=
'development'
# must start with VUE_APP_
VUE_APP_ENV
=
'development'
```
-
.env.staging 测试环境配置
```
bash
NODE_ENV
=
'production'
# must start with VUE_APP_
VUE_APP_ENV
=
'staging'
```
-
.env.production 正式环境配置
```
bash
NODE_ENV
=
'production'
# must start with VUE_APP_
VUE_APP_ENV
=
'production'
```
这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV
`development`
`staging`
`production`
变量我们统一在 src/config/env.
\*
.js 里进行管理。修改起来方便,不需要重启项目,符合开发习惯。
config/index.js
```
javascript
// 根据环境引入不同配置 process.env.NODE_ENV
const
config
=
require
(
'./env.'
+
process
.
env
.
VUE_APP_ENV
)
module
.
exports
=
config
```
配置对应环境的变量,拿本地环境文件
`env.development.js`
举例,用户可以根据需求修改
```
javascript
// 本地环境配置
module
.
exports
=
{
title
:
'vue-h5-template'
,
baseUrl
:
'http://localhost:9018'
,
// 项目地址
baseApi
:
'https://test.xxx.com/api'
,
// 本地api请求地址
APPID
:
'xxx'
,
APPSECRET
:
'xxx'
}
```
根据环境不同,变量就会不同了
```
javascript
// 根据环境不同引入不同baseApi地址
import
{
baseApi
}
from
'@/config'
console
.
log
(
baseApi
)
```
[
▲ 回顶部
](
#top
)
### <span id="rem">✅ rem 适配方案 </span>
不用担心,项目已经配置好了
`rem`
适配, 下面仅做介绍:
#### 多环境
Vant 中的样式默认使用
`px`
作为单位,如果需要使用
`rem`
单位,推荐使用以下两个工具:
-
[
postcss-pxtorem
](
https://github.com/cuth/postcss-pxtorem
)
是一款
`postcss`
插件,用于将单位转化为
`rem`
-
[
lib-flexible
](
https://github.com/amfe/lib-flexible
)
用于设置
`rem`
基准值
之前写过一个多环境的方案,是基于vue-cli2.0的
[
vue多环境配置方案-传送门
](
https://segmentfault.com/a/1190000019136606
)
最近新的项目采用了vuecli3.0开始了一番折腾
##### PostCSS 配置
这里参考了
[
vue-admin-template
](
https://github.com/PanJiaChen/vue-admin-template
)
基本思路不变
在src的文件里新建config 根据不同的环境去引用不同的配置文件,不同的是在根目录下有三个设置环境变量的文件
这里可以参考vue-admin-template
下面提供了一份基本的
`postcss`
配置,可以在此配置的基础上根据项目需求进行修改
#### rem适配方案
```
javascript
// https://github.com/michael-ciniawsky/postcss-load-config
module
.
exports
=
{
plugins
:
{
autoprefixer
:
{
overrideBrowserslist
:
[
'Android 4.1'
,
'iOS 7.1'
,
'Chrome > 31'
,
'ff > 31'
,
'ie >= 8'
]
},
'postcss-pxtorem'
:
{
rootValue
:
37.5
,
propList
:
[
'*'
]
}
}
}
```
还是那句话,用vw还是用rem,这是个问题?
更多详细信息:
[
vant
](
https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa
)
选用rem的原因是因为vant直接给到了这个适配方案,个人也比较喜欢这个方案
**新手必看,老鸟跳过**
[
vant
](
https://youzan.github.io/vant/#/zh-CN/quickstart
)
很多小伙伴会问我,适配的问题。
#### 总结
举个例子:设计给了你一张 750px
\*
1334px 图片,在 iPhone6 上铺面屏幕,其他机型适配。
-
当
`rootValue: 70`
, 样式
`width: 750px;height: 1334px;`
图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
-
当
`rootValue: 37.5`
的时候,样式
`width: 375px;height: 667px;`
图片会撑满 iPhone6 屏幕。
本案例采用 Vant 是基于 375 设计稿 , rootValue: 37.5。其他的你就可以根据你设计图,去做对应的设置了。
当然,想要撑满屏幕你可以使用100%,这里只是举例说明。
```
html
<img
class=
"image"
src=
"https://imgs.solui.cn/weapp/logo.png"
/>
<style>
/* rootValue: 75 */
.image
{
width
:
750px
;
height
:
1334px
;
}
/* rootValue: 37.5 */
.image
{
width
:
375px
;
height
:
667px
;
}
</style>
```
[
▲ 回顶部
](
#top
)
#### 总结
因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长
...
...
@@ -46,6 +201,7 @@
获取更多技术相关文章,关注公众号”前端女塾“。
回复加群,即可加入”前端仙女群“
<p>
<img
src=
"./static/gognzhonghao.jpg"
width=
"256"
style=
"display:inline;"
>
</p>
...
...
package-lock.json
View file @
ce8557e
This diff could not be displayed because it is too large.
package.json
View file @
ce8557e
...
...
@@ -2,12 +2,12 @@
"name"
:
"vue-h5-template"
,
"version"
:
"2.0.0"
,
"description"
:
"A vue h5 template with Vant UI"
,
"author"
:
"Sunnie <s
406803045
@163.com>"
,
"author"
:
"Sunnie <s
unniejs
@163.com>"
,
"private"
:
true
,
"scripts"
:
{
"serve"
:
"vue-cli-service serve --open"
,
"build
:prod
"
:
"vue-cli-service build"
,
"
build:
stage"
:
"vue-cli-service build --mode staging"
,
"build"
:
"vue-cli-service build"
,
"stage"
:
"vue-cli-service build --mode staging"
,
"lint"
:
"vue-cli-service lint"
},
"dependencies"
:
{
...
...
src/config/env.development.js
View file @
ce8557e
// 本地
// 本地
环境配置
module
.
exports
=
{
title
:
'vue-h5-template'
,
baseUrl
:
'https://test.xxx.com'
,
// 项目地址
baseApi
:
'https://test.xxx.com'
,
// 本地api请求地址
api
:
{
base_api
:
'https://xxx.xxx.com/admin'
,
common_api
:
'https://xxx.xxx.com/common'
}
baseUrl
:
'http://localhost:9018'
,
// 项目地址
baseApi
:
'https://test.xxx.com/api'
,
// 本地api请求地址
APPID
:
'xxx'
,
APPSECRET
:
'xxx'
}
...
...
src/config/env.production.js
View file @
ce8557e
...
...
@@ -2,9 +2,7 @@
module
.
exports
=
{
title
:
'vue-h5-template'
,
baseUrl
:
'https://www.xxx.com/'
,
// 正式项目地址
baseApi
:
'https://test.xxx.com'
,
// 正式api请求地址
api
:
{
base_api
:
'https://xxx.xxx.com/admin'
,
common_api
:
'https://xxx.xxx.com/common'
}
baseApi
:
'https://www.xxx.com/api'
,
// 正式api请求地址
APPID
:
'xxx'
,
APPSECRET
:
'xxx'
}
...
...
src/config/env.staging.js
View file @
ce8557e
module
.
exports
=
{
title
:
'vue-h5-template'
,
baseUrl
:
'https://test.xxx.com'
,
// 测试项目地址
baseApi
:
'https://test.xxx.com'
,
// 测试api请求地址
api
:
{
base_api
:
'https://xxx.xxx.com/admin'
,
common_api
:
'https://xxx.xxx.com/common'
}
baseApi
:
'https://test.xxx.com/api'
,
// 测试api请求地址
APPID
:
'xxx'
,
APPSECRET
:
'xxx'
}
...
...
vue.config.js
View file @
ce8557e
...
...
@@ -46,7 +46,18 @@ module.exports = {
overlay
:
{
warnings
:
false
,
errors
:
true
}
},
// proxy: {
// //配置跨域
// '/api': {
// target: "https://test.xxx.com",
// ws:true,
// changOrigin:true,
// pathRewrite:{
// '^/api':'/'
// }
// }
// }
},
configureWebpack
:
config
=>
{
...
...
Write
Preview
Styling with
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment