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
6c4a6a6f
authored
2020-04-20 18:07:56 +0800
by
sunnie
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
about
1 parent
452ad3d7
Show whitespace changes
Inline
Side-by-side
Showing
12 changed files
with
324 additions
and
247 deletions
README.md
public/index.html
src/App.vue
src/assets/css/index.scss
src/components/TabBar.vue
src/config/env.development.js
src/config/env.production.js
src/config/env.staging.js
src/main.js
src/views/home/about.vue
src/views/home/index.vue
vue.config.js
README.md
View file @
6c4a6a6
...
...
@@ -2,7 +2,7 @@
基于 vue-cli3.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装,构建手机端模板脚手架
[
关于项目介绍
](
https://juejin.im/post/5cfefc73f265da1bba58f9f7
)
掘金:
[
vue-cli4 vant rem 移动端框架方案
](
https://juejin.im/post/5cfefc73f265da1bba58f9f7
)
[
demo
](
https://solui.cn/vue-h5-template/#/
)
建议手机端查看
...
...
@@ -13,6 +13,19 @@
本示例 Node.js 12.14.1
### 启动项目
```
bash
git clone https://github.com/sunniejs/vue-h5-template.git
cd
vue-h5-template
npm install
npm run serve
```
<span
id=
"top"
>
目录
</span>
-
[
√ Vue-cli4
](
https://cli.vuejs.org/zh/guide/
)
...
...
@@ -30,10 +43,9 @@
-
[
√ 配置 打包分析
](
#bundle
)
-
[
√ 配置 externals 引入 cdn 资源
](
#externals
)
-
[
√ 去掉 console.log
](
#console
)
-
[
√ splitChunks
](
#console
)
-
[
√ splitChunks
单独打包第三方模块
](
#chunks
)
-
[
√ 添加 IE 兼容
](
#ie
)
*
Vuex
*
Axios 封装
*
生产环境 cdn 优化首屏加速
...
...
@@ -466,7 +478,7 @@ module.exports = {
outputDir
:
'dist'
,
// 生产环境构建文件的目录
assetsDir
:
'static'
,
// outputDir的静态资源(js、css、img、fonts)目录
lintOnSave
:
false
,
productionSourceMap
:
!
IS_PROD
,
// 生产环境的 source map
productionSourceMap
:
false
,
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
devServer
:
{
port
:
9020
,
// 端口号
open
:
false
,
// 启动后打开浏览器
...
...
@@ -524,9 +536,9 @@ export function getUserInfo(params) {
### <span id="alias">✅ 配置 alias 别名 </span>
```
javascript
const
path
=
require
(
"path"
);
const
resolve
=
dir
=>
path
.
join
(
__dirname
,
dir
)
;
const
IS_PROD
=
[
"production"
,
"prod"
].
includes
(
process
.
env
.
NODE_ENV
);
const
path
=
require
(
'path'
)
const
resolve
=
dir
=>
path
.
join
(
__dirname
,
dir
)
const
IS_PROD
=
[
'production'
,
'prod'
].
includes
(
process
.
env
.
NODE_ENV
)
module
.
exports
=
{
chainWebpack
:
config
=>
{
...
...
@@ -538,40 +550,52 @@ module.exports = {
.
set
(
'views'
,
resolve
(
'src/views'
))
.
set
(
'components'
,
resolve
(
'src/components'
))
}
}
;
}
```
[
▲ 回顶部
](
#top
)
### <span id="bundle">✅ 配置 打包分析 </span>
```
javascript
const
BundleAnalyzerPlugin
=
require
(
"webpack-bundle-analyzer"
)
.
BundleAnalyzerPlugin
;
const
BundleAnalyzerPlugin
=
require
(
'webpack-bundle-analyzer'
).
BundleAnalyzerPlugin
module
.
exports
=
{
chainWebpack
:
config
=>
{
// 打包分析
if
(
IS_PROD
)
{
config
.
plugin
(
"webpack-report"
).
use
(
BundleAnalyzerPlugin
,
[
config
.
plugin
(
'webpack-report'
).
use
(
BundleAnalyzerPlugin
,
[
{
analyzerMode
:
"static"
analyzerMode
:
'static'
}
])
;
])
}
}
}
;
}
```
```
bash
npm run build
```
[
▲ 回顶部
](
#top
)
### <span id="proxy">✅ 配置 externals 引入 cdn 资源 </span>
这个版本 CDN 不再引入,我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块,这个开发者可
以实际测试一下。
另外项目中使用的是公共 CDN 不稳定,域名解析也是需要时间的(如果你要使用请尽量使用同一个域名)
因为页面每次遇到
`<script>`
标签都会停下来解析执行,所以应该尽可能减少
`<script>`
标签的数量
`HTTP`
请求存在一定的开销,100K
的文件比 5 个 20K 的文件下载的更快,所以较少脚本数量也是很有必要的
暂时还没有研究放到自己的 cdn 服务器上。
```
javascript
const
defaultSettings
=
require
(
'./src/config/index.js'
)
const
name
=
defaultSettings
.
title
||
'vue mobile template'
const
IS_PROD
=
[
"production"
,
"prod"
].
includes
(
process
.
env
.
NODE_ENV
);
const
IS_PROD
=
[
'production'
,
'prod'
].
includes
(
process
.
env
.
NODE_ENV
)
// externals
const
externals
=
{
...
...
@@ -581,17 +605,24 @@ const externals = {
vant
:
'vant'
,
axios
:
'axios'
}
//
cdn
//
CDN外链,会插入到index.html中
const
cdn
=
{
css
:
[
'https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'
],
// 开发环境
dev
:
{
css
:
[],
js
:
[]
},
// 生产环境
build
:
{
css
:
[
'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'
],
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'
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js'
,
'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js'
,
'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js'
,
'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js'
,
'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
]
}
}
module
.
exports
=
{
configureWebpack
:
config
=>
{
...
...
@@ -600,26 +631,31 @@ module.exports = {
if
(
IS_PROD
)
{
// externals
config
.
externals
=
externals
}
;
}
},
chainWebpack
:
config
=>
{
// 添加CDN参数到htmlWebpackPlugin配置中, 详见public/index.html 修改
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
config
.
plugin
(
'html'
).
tap
(
args
=>
{
if
(
IS_PROD
)
{
// html中添加cdn
args
[
0
].
cdn
=
cdn
args
[
0
].
cdn
=
cdn
.
build
}
else
{
args
[
0
].
cdn
=
cdn
.
dev
}
return
args
})
}
}
;
}
```
在 public/index.html 中添加
在 public/index.html 中添加
```
javascript
<!--
使用
CDN
的
CSS
文件
-->
<%
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"
/>
<%
}
%>
<!--
使用
CDN
加速的
JS
文件,配置在
vue
.
config
.
js
下
-->
...
...
@@ -633,9 +669,12 @@ module.exports = {
### <span id="console">✅ 去掉 console.log </span>
保留了测试环境和本地环境的
`console.log`
```
bash
npm i -D babel-plugin-transform-remove-console
```
在 babel.config.js 中配置
```
javascript
...
...
@@ -661,19 +700,82 @@ module.exports = {
presets
:
[[
'@vue/cli-plugin-babel/preset'
,
{
useBuiltIns
:
'entry'
}]],
plugins
}
```
[
▲ 回顶部
](
#top
)
### <span id="chunks">✅ splitChunks 单独打包第三方模块</span>
```
javascript
module
.
exports
=
{
chainWebpack
:
config
=>
{
config
.
when
(
IS_PROD
,
config
=>
{
config
.
plugin
(
'ScriptExtHtmlWebpackPlugin'
)
.
after
(
'html'
)
.
use
(
'script-ext-html-webpack-plugin'
,
[
{
// 将 runtime 作为内联引入不单独存在
inline
:
/runtime
\.
.*
\.
js$/
}
])
.
end
()
config
.
optimization
.
splitChunks
({
chunks
:
'all'
,
cacheGroups
:
{
// cacheGroups 下可以可以配置多个组,每个组根据test设置条件,符合test条件的模块
commons
:
{
name
:
'chunk-commons'
,
test
:
resolve
(
'src/components'
),
minChunks
:
3
,
// 被至少用三次以上打包分离
priority
:
5
,
// 优先级
reuseExistingChunk
:
true
// 表示是否使用已有的 chunk,如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了,那么将不会重新生成新的。
},
node_vendors
:
{
name
:
'chunk-libs'
,
chunks
:
'initial'
,
// 只打包初始时依赖的第三方
test
:
/
[\\/]
node_modules
[\\/]
/
,
priority
:
10
},
vantUI
:
{
name
:
'chunk-vantUI'
,
// 单独将 vantUI 拆包
priority
:
20
,
// 数字大权重到,满足多个 cacheGroups 的条件时候分到权重高的
test
:
/
[\\/]
node_modules
[\\/]
_
?
vant
(
.*
)
/
}
}
})
config
.
optimization
.
runtimeChunk
(
'single'
)
})
}
}
```
[
▲ 回顶部
](
#top
)
### <span id="ie">✅ 添加 IE 兼容 </span>
[
▲ 回顶部
](
#top
)
```
bash
npm i -S @babel/polyfill
```
### <span id="console">✅ 去掉 console.log </span>
[
▲ 回顶部
](
#top
)
在
`main.js`
中添加
```
javascript
import
'@babel/polyfill'
```
配置
`babel.config.js`
```
javascript
const
plugins
=
[]
module
.
exports
=
{
presets
:
[[
'@vue/cli-plugin-babel/preset'
,
{
useBuiltIns
:
'entry'
}]],
plugins
}
```
[
▲ 回顶部
](
#top
)
#### 总结
...
...
public/index.html
View file @
6c4a6a6
...
...
@@ -5,11 +5,11 @@
<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
<
!-- <
% 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>
...
...
@@ -18,10 +18,10 @@
</noscript>
<div
id=
"app"
></div>
<!-- 使用CDN加速的JS文件,配置在vue.config.js下 -->
<
% for (var i in
<
!-- <
% 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>
...
...
src/App.vue
View file @
6c4a6a6
...
...
@@ -4,10 +4,19 @@
<router-view
v-if=
"$route.meta.keepAlive"
></router-view>
</keep-alive>
<router-view
v-if=
"!$route.meta.keepAlive"
></router-view>
<!-- tabbar -->
<TabBar></TabBar>
</div>
</
template
>
<
script
>
import
TabBar
from
'@/components/TabBar'
export
default
{
name
:
'App'
name
:
'App'
,
components
:
{
TabBar
},
}
</
script
>
<
style
lang=
"scss"
>
</
style
>
\ No newline at end of file
...
...
src/assets/css/index.scss
View file @
6c4a6a6
@import
'./variables.scss'
;
@import
'./mixin.scss'
;
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html
,
body
,
div
,
span
,
applet
,
object
,
iframe
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
p
,
blockquote
,
pre
,
a
,
abbr
,
acronym
,
address
,
big
,
cite
,
code
,
del
,
dfn
,
em
,
img
,
ins
,
kbd
,
q
,
s
,
samp
,
small
,
strike
,
strong
,
sub
,
sup
,
tt
,
var
,
b
,
u
,
i
,
center
,
dl
,
dt
,
dd
,
ol
,
ul
,
li
,
fieldset
,
form
,
label
,
legend
,
table
,
caption
,
tbody
,
tfoot
,
thead
,
tr
,
th
,
td
,
article
,
aside
,
canvas
,
details
,
embed
,
figure
,
figcaption
,
footer
,
header
,
hgroup
,
menu
,
nav
,
output
,
ruby
,
section
,
summary
,
time
,
mark
,
audio
,
video
{
margin
:
0
;
padding
:
0
;
border
:
0
;
font-size
:
100%
;
font
:
inherit
;
vertical-align
:
baseline
;
}
/* HTML5 display-role reset for older browsers */
article
,
aside
,
details
,
figcaption
,
figure
,
footer
,
header
,
hgroup
,
menu
,
nav
,
section
{
display
:
block
;
}
body
{
line-height
:
1
;
}
ol
,
ul
{
list-style
:
none
;
}
blockquote
,
q
{
quotes
:
none
;
}
blockquote
:before
,
blockquote
:after
,
q
:before
,
q
:after
{
content
:
''
;
content
:
none
;
}
table
{
border-collapse
:
collapse
;
border-spacing
:
0
;
}
.app-container
{
padding-bottom
:
50px
}
\ No newline at end of file
...
...
src/components/TabBar.vue
View file @
6c4a6a6
<
template
>
<div>
<van-tabbar
fixed
v-model=
"active"
@
change=
"onChange"
>
<van-tabbar-item
icon=
"home-o"
>
首页
</van-tabbar-item>
<van-tabbar-item
icon=
"good-job-o"
>
github
</van-tabbar-item>
<van-tabbar
fixed
route
>
<van-tabbar-item
to=
"/"
icon=
"home-o"
>
首页
</van-tabbar-item>
<van-tabbar-item
to=
"/about"
icon=
"user-o"
>
关于我
</van-tabbar-item>
</van-tabbar>
<!--
<van-tabbar
fixed
v-model=
"active"
@
change=
"onChange"
>
<van-tabbar-item
to=
"/home"
icon=
"home-o"
>
首页
</van-tabbar-item>
<van-tabbar-item
to=
"/about"
icon=
"user-o"
>
关于我
</van-tabbar-item>
</van-tabbar>
-->
</div>
</
template
>
<
script
>
import
_
from
'lodash'
console
.
log
(
_
.
join
([
'a'
,
'b'
],
'~'
))
export
default
{
name
:
'TabBar'
,
data
()
{
...
...
@@ -18,9 +25,9 @@ export default {
}
},
methods
:
{
onChange
(
index
)
{
if
(
index
===
1
)
window
.
location
.
href
=
'https://github.com/sunniejs/vue-h5-template'
}
//
onChange(index) {
//
if (index === 1) window.location.href = 'https://github.com/sunniejs/vue-h5-template'
//
}
}
}
</
script
>
...
...
src/config/env.development.js
View file @
6c4a6a6
...
...
@@ -4,5 +4,6 @@ module.exports = {
baseUrl
:
'http://localhost:9018'
,
// 项目地址
baseApi
:
'https://test.xxx.com/api'
,
// 本地api请求地址
APPID
:
'xxx'
,
APPSECRET
:
'xxx'
APPSECRET
:
'xxx'
,
$cdn
:
'https://imgs.solui.cn'
}
...
...
src/config/env.production.js
View file @
6c4a6a6
...
...
@@ -4,5 +4,6 @@ module.exports = {
baseUrl
:
'https://www.xxx.com/'
,
// 正式项目地址
baseApi
:
'https://www.xxx.com/api'
,
// 正式api请求地址
APPID
:
'xxx'
,
APPSECRET
:
'xxx'
APPSECRET
:
'xxx'
,
$cdn
:
'https://imgs.solui.cn'
}
...
...
src/config/env.staging.js
View file @
6c4a6a6
...
...
@@ -3,5 +3,6 @@ module.exports = {
baseUrl
:
'https://test.xxx.com'
,
// 测试项目地址
baseApi
:
'https://test.xxx.com/api'
,
// 测试api请求地址
APPID
:
'xxx'
,
APPSECRET
:
'xxx'
APPSECRET
:
'xxx'
,
$cdn
:
'https://imgs.solui.cn'
}
...
...
src/main.js
View file @
6c4a6a6
...
...
@@ -5,7 +5,7 @@ import App from './App.vue'
import
router
from
'./router'
import
store
from
'./store'
// 引入全局样式
import
'@/assets/css/index.scss'
//
import '@/assets/css/index.scss'
// 全局引入按需引入UI库 vant
import
'@/plugins/vant'
...
...
src/views/home/about.vue
View file @
6c4a6a6
...
...
@@ -6,45 +6,31 @@
<h2
class=
"demo-home__desc"
>
A vue h5 template with Vant UI
</h2>
<div
class=
"list"
>
<div
class=
"item"
>
项目地址:
<a
href=
"https://github.com/sunniejs"
>
https://github.com/sunniejs
</a></div>
<div
class=
"item"
>
项目作者: sunnie
</div>
<div
class=
"item"
></div>
<div
class=
"author"
></div>
</div>
</div>
<van-cell
icon=
"success"
v-for=
"item in list"
:key=
"item"
:title=
"item"
/>
<!-- tabbar -->
<TabBar></TabBar>
</div>
</
template
>
<
script
>
import
TabBar
from
'@/components/TabBar'
// 请求接口
import
{
getUserInfo
}
from
'@/api/user.js'
import
{
getUserInfo
}
from
'@/api/user.js'
export
default
{
components
:
{
TabBar
},
data
()
{
return
{
list
:
[
'Vue-cli4'
,
'VantUI组件按需加载'
,
'Sass'
,
'Webpack 4'
,
'Vue-router'
,
'Vuex'
,
'Axios封装'
,
'rem适配方案'
,
'多环境配置'
,
'生产环境cdn优化首屏加速'
,
'babel低版本浏览器兼容'
,
'Eslint+Pettier统一开发规范'
]
}
},
computed
:
{},
mounted
()
{
this
.
initData
()
},
...
...
@@ -52,10 +38,10 @@ export default {
// 请求数据案例
initData
()
{
// 请求接口数据,仅作为展示,需要配置src->config下环境文件
const
params
=
{
user
:
'sunnie'
}
const
params
=
{
user
:
'sunnie'
}
getUserInfo
(
params
)
.
then
(()
=>
{})
.
catch
(()
=>
{})
.
then
(()
=>
{
})
.
catch
(()
=>
{
})
}
}
}
...
...
@@ -64,6 +50,7 @@ export default {
.app-container
{
.warpper
{
padding
:
12px
;
background
:
$
background-color
;
.demo-home__title
{
margin
:
0
0
6px
;
font-size
:
32px
;
...
...
@@ -85,6 +72,23 @@ export default {
color
:
rgba
(
69
,
90
,
100
,
0.6
);
font-size
:
14px
;
}
.list
{
display
:
flex
;
flex-direction
:
column
;
color
:
#666
;
font-size
:
14px
;
.item
{
font-size
:
14px
;
line-height
:
24px
;
}
}
.author
{
margin
:
10px
auto
;
width
:
200px
;
height
:
200px
;
background
:
url($cdn+'/weapp/me.png')
center
/
contain
no-repeat
;
}
}
}
</
style
>
...
...
src/views/home/index.vue
View file @
6c4a6a6
...
...
@@ -8,36 +8,35 @@
</h2>
</div>
<van-cell
icon=
"success"
v-for=
"item in list"
:key=
"item"
:title=
"item"
/>
<!-- tabbar -->
<TabBar></TabBar>
</div>
</
template
>
<
script
>
import
TabBar
from
'@/components/TabBar'
// 请求接口
import
{
getUserInfo
}
from
'@/api/user.js'
import
{
getUserInfo
}
from
'@/api/user.js'
export
default
{
components
:
{
TabBar
},
data
()
{
return
{
list
:
[
'Vue-cli4'
,
'VantUI组件按需加载'
,
'Sass'
,
' 配置多环境变量'
,
' VantUI 组件按需加载'
,
' Sass'
,
'Webpack 4'
,
'Vue-router'
,
'Vuex'
,
'Axios封装'
,
'rem适配方案'
,
'多环境配置'
,
'生产环境cdn优化首屏加速'
,
'babel低版本浏览器兼容'
,
'Eslint+Pettier统一开发规范'
' Axios 封装及接口管理'
,
'Vue-router'
,
'vue.config.js 基础配置'
,
'配置 proxy 跨域'
,
'配置 alias 别名'
,
'配置 打包分析'
,
'配置 externals 引入 cdn 资源'
,
'去掉 console.log'
,
'splitChunks 单独打包第三方模块'
,
' 添加 IE 兼容'
]
}
},
...
...
@@ -52,19 +51,19 @@ export default {
// 请求数据案例
initData
()
{
// 请求接口数据,仅作为展示,需要配置src->config下环境文件
const
params
=
{
user
:
'sunnie'
}
const
params
=
{
user
:
'sunnie'
}
getUserInfo
(
params
)
.
then
(()
=>
{})
.
catch
(()
=>
{})
.
then
(()
=>
{
})
.
catch
(()
=>
{
})
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
//
@import
'@/assets/css/index.scss'
;
.app-container
{
.warpper
{
padding
:
12px
;
background
:
$
background-color
;
.demo-home__title
{
margin
:
0
0
6px
;
font-size
:
32px
;
...
...
vue.config.js
View file @
6c4a6a6
...
...
@@ -9,45 +9,32 @@ const name = defaultSettings.title || 'vue mobile template'
const
IS_PROD
=
[
'production'
,
'prod'
].
includes
(
process
.
env
.
NODE_ENV
)
// externals
const
externals
=
{
vue
:
'Vue'
,
'vue-router'
:
'VueRouter'
,
vuex
:
'Vuex'
,
vant
:
'vant'
,
axios
:
'axios'
}
//
const externals = {
//
vue: 'Vue',
//
'vue-router': 'VueRouter',
//
vuex: 'Vuex',
//
vant: 'vant',
//
axios: 'axios'
//
}
// CDN外链,会插入到index.html中
const
cdn
=
{
// 开发环境
dev
:
{
css
:
[
],
js
:
[]
},
// 生产环境
build
:
{
css
:
[
'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'
],
js
:
[
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js'
,
'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js'
,
'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js'
,
'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js'
,
'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
]
}
}
// const cdn = {
// // 开发环境
// dev: {
// css: [],
// js: []
// },
// // 生产环境
// build: {
// css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
// js: [
// 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js',
// 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.5/vue-router.min.js',
// 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js',
// 'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.2/vuex.min.js',
// 'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js',
// 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js',
// 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
// 'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
// 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
// 'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
// 'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
// ]
// }
// }
module
.
exports
=
{
publicPath
:
'./'
,
// 署应用包时的基本 URL。 vue-router hash 模式使用
...
...
@@ -55,7 +42,7 @@ module.exports = {
outputDir
:
'dist'
,
// 生产环境构建文件的目录
assetsDir
:
'static'
,
// outputDir的静态资源(js、css、img、fonts)目录
lintOnSave
:
false
,
productionSourceMap
:
!
IS_PROD
,
// 生产环境的 source map
productionSourceMap
:
false
,
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
devServer
:
{
port
:
9020
,
// 端口
open
:
false
,
// 启动后打开浏览器
...
...
@@ -76,16 +63,27 @@ module.exports = {
// }
// }
},
css
:
{
extract
:
IS_PROD
,
sourceMap
:
false
,
loaderOptions
:
{
scss
:
{
// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
prependData
:
`
@import "assets/css/index.scss";
$cdn: "
${
defaultSettings
.
$cdn
}
";
`
}
}
},
configureWebpack
:
config
=>
{
config
.
name
=
name
// 为生产环境修改配置...
if
(
IS_PROD
)
{
// externals
config
.
externals
=
externals
}
// 为开发环境修改配置...
// if (process.env.NODE_ENV === 'development') {
// if (IS_PROD) {
// // externals
// config.externals = externals
// }
},
...
...
@@ -100,7 +98,34 @@ module.exports = {
.
set
(
'api'
,
resolve
(
'src/api'
))
.
set
(
'views'
,
resolve
(
'src/views'
))
.
set
(
'components'
,
resolve
(
'src/components'
))
// 打包分析
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
// config.plugin('html').tap(args => {
// if (IS_PROD) {
// args[0].cdn = cdn.build
// } else {
// args[0].cdn = cdn.dev
// }
// return args
// })
/**
* 设置保留空格
*/
config
.
module
.
rule
(
'vue'
)
.
use
(
'vue-loader'
)
.
loader
(
'vue-loader'
)
.
tap
(
options
=>
{
options
.
compilerOptions
.
preserveWhitespace
=
true
return
options
})
.
end
()
/**
* 打包分析
*/
if
(
IS_PROD
)
{
config
.
plugin
(
'webpack-report'
).
use
(
BundleAnalyzerPlugin
,
[
{
...
...
@@ -108,69 +133,46 @@ module.exports = {
}
])
}
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
config
.
plugin
(
'html'
).
tap
(
args
=>
{
if
(
IS_PROD
)
{
args
[
0
].
cdn
=
cdn
.
build
}
else
{
args
[
0
].
cdn
=
cdn
.
dev
}
config
// https://webpack.js.org/configuration/devtool/#development
.
when
(
!
IS_PROD
,
config
=>
config
.
devtool
(
'cheap-source-map'
))
return
args
config
.
when
(
IS_PROD
,
config
=>
{
config
.
plugin
(
'ScriptExtHtmlWebpackPlugin'
)
.
after
(
'html'
)
.
use
(
'script-ext-html-webpack-plugin'
,
[
{
// 将 runtime 作为内联引入不单独存在
inline
:
/runtime
\.
.*
\.
js$/
}
])
.
end
()
config
.
optimization
.
splitChunks
({
chunks
:
'all'
,
cacheGroups
:
{
// cacheGroups 下可以可以配置多个组,每个组根据test设置条件,符合test条件的模块
commons
:
{
name
:
'chunk-commons'
,
test
:
resolve
(
'src/components'
),
minChunks
:
3
,
// 被至少用三次以上打包分离
priority
:
5
,
// 优先级
reuseExistingChunk
:
true
// 表示是否使用已有的 chunk,如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了,那么将不会重新生成新的。
},
node_vendors
:
{
name
:
'chunk-libs'
,
chunks
:
'initial'
,
// 只打包初始时依赖的第三方
test
:
/
[\\/]
node_modules
[\\/]
/
,
priority
:
10
},
vantUI
:
{
name
:
'chunk-vantUI'
,
// 单独将 vantUI 拆包
priority
:
20
,
// 数字大权重到,满足多个 cacheGroups 的条件时候分到权重高的
test
:
/
[\\/]
node_modules
[\\/]
_
?
vant
(
.*
)
/
}
}
})
config
.
optimization
.
runtimeChunk
(
'single'
)
})
// 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(IS_PROD, 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: {
// // cacheGroups 下可以可以配置多个组,每个组根据test设置条件,符合test条件的模块
// commons: {
// name: 'chunk-commons',
// test: resolve('src/components'),
// minChunks: 3, // 被至少用三次以上打包分离
// priority: 5, // 优先级
// reuseExistingChunk: true // 复用其他chunk内已拥有的模块
// },
// // vantUI: {
// // name: 'chunk-vantUI', // 将 vant 打包到单独文件
// // priority: 20,
// // test: /[\\/]node_modules[\\/]_?vant(.*)/ // in order to adapt to cnpm
// // },
// libs: {
// name: 'chunk-libs',
// chunks: 'initial', // only package third parties that are initially dependent
// test: /[\\/]node_modules[\\/]/,
// priority: 10
// }
// }
// })
// config.optimization.runtimeChunk('single')
// })
}
}
...
...
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