Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit b8d5607

Browse files
weizhanzhanweizhanzhan
committedSep 2, 2020
config优化配置更方便
1 parent d4ca775 commit b8d5607

10 files changed

+22966
-22
lines changed
 

‎README.md

+101-2
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,105 @@ npm run build
9494
- TypeScript（已经加入）
9595
```
9696

97+
### 顶部加载条
98+
安装
99+
```
100+
yarn add nprogress
101+
yarn add @types/nprogress
102+
```
103+
使用
104+
```js
105+
router.beforeEach(()=>{
106+
NProgress.start()
107+
})
108+
router.afterEach(() => {
109+
NProgress.done()
110+
})
111+
```
112+
113+
114+
### 抽取公共包，引入CDN
115+
```js
116+
const externals = {
117+
vue: 'Vue',
118+
'vue-router': 'VueRouter',
119+
vuex: 'Vuex',
120+
axios: 'axios'
121+
}
122+
const cdnMap = {
123+
css: [],
124+
js: [
125+
'//unpkg.com/vue@2.6.10/dist/vue.min.js',
126+
'//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js',
127+
'//unpkg.com/vuex@3.1.1/dist/vuex.min.js',
128+
'//unpkg.com/axios@0.19.0/dist/axios.min.js'
129+
]
130+
}
131+
module.exports = {
132+
chainWebpack: config => {
133+
config.externals(externals)
134+
config.plugin('html').tap(args => {
135+
args[0].cdn = cdnMap
136+
args[0].minify && (args[0].minify.minifyCSS = true) // 压缩html中的css
137+
return args
138+
})
139+
}
140+
}
141+
142+
```
143+
144+
然后在index.html里添加
145+
```html
146+
<!-- 使用CDN的CSS文件 -->
147+
<% for (var i in
148+
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
149+
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
150+
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
151+
<% } %>
152+
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
153+
<% for (var i in
154+
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
155+
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
156+
<% } %>
157+
158+
```
159+
160+
### 去除console
161+
保存测试环境和本地开发环境的console
162+
```
163+
npm i -D babel-plugin-transform-remove-console
164+
```
165+
在 babel.config.js 中配置
166+
```js
167+
// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
168+
const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
169+
170+
const plugins = [
171+
[
172+
'import',
173+
{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
174+
]
175+
]
176+
177+
// 去除 console.log
178+
if (IS_PROD) {
179+
plugins.push('transform-remove-console')
180+
}
181+
182+
module.exports = {
183+
presets: ['@vue/cli-plugin-babel/preset'],
184+
plugins
185+
}
186+
187+
188+
```
189+
190+
# 关于我
191+
![Image text](https://github.com/weizhanzhan/antd-vue-admin/blob/typescript_dev/public/me.png)
192+
加我微信，邀你进入技术交流群，交流学习 😄 共同进步<br>
193+
如果喜欢请给我一个小♥♥ ⭐ （づ￣3￣）づ
97194

98-
<!-- ![Image text](https://github.com/weizhanzhan/antd-vue-admin/blob/antd-vue-ts/public/dark.png)
99-
![Image text](https://github.com/weizhanzhan/antd-vue-admin/blob/antd-vue-ts/public/light.png) -->
195+
# 感谢
196+
[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) <br>
197+
[ant-design-pro-vue](https://github.com/sendya/ant-design-pro-vue) <br>
198+
[vue-h5-template](https://github.com/sunniejs/vue-h5-template)

‎babel.config.js

+17-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1+
// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
2+
const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
3+
4+
const plugins = [
5+
[
6+
'import',
7+
{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
8+
]
9+
]
10+
11+
// 去除 console.log
12+
if (IS_PROD) {
13+
plugins.push('transform-remove-console')
14+
}
15+
116
module.exports = {
217
presets: ['@vue/cli-plugin-babel/preset'],
3-
plugins: [
4-
[
5-
'import',
6-
{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
7-
]
8-
]
18+
plugins
919
}
20+

‎package-lock.json

+13,016
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"less": "^2.7.3",
2121
"less-loader": "^5.0.0",
2222
"node-sass": "^4.13.1",
23+
"nprogress": "^0.2.0",
2324
"sass-loader": "^8.0.2",
2425
"vue": "^2.6.11",
2526
"vue-class-component": "^7.2.2",
@@ -38,6 +39,7 @@
3839
"@vue/cli-service": "^4.2.0",
3940
"@vue/eslint-config-prettier": "^6.0.0",
4041
"@vue/eslint-config-typescript": "^5.0.1",
42+
"babel-plugin-transform-remove-console": "^6.9.4",
4143
"eslint": "^6.7.2",
4244
"eslint-plugin-prettier": "^3.1.1",
4345
"eslint-plugin-vue": "^6.1.2",

‎public/index.html

+11-5
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,20 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
88
<title><%= htmlWebpackPlugin.options.title %></title>
9-
<script type="text/javascript" charset="utf-8" src="//unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
10-
<script type="text/javascript" charset="utf-8" src="//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js"></script>
11-
<script type="text/javascript" charset="utf-8" src="//unpkg.com/vuex@3.1.1/dist/vuex.min.js"></script>
12-
<script type="text/javascript" charset="utf-8" src="//unpkg.com/axios@0.19.0/dist/axios.min.js"></script>
139
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
1410
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
1511
<script type="text/javascript" charset="utf-8" src="<%= BASE_URL %>aliyun_player_component.js"></script>
16-
12+
<!-- 使用CDN的CSS文件 -->
13+
<% for (var i in
14+
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
15+
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
16+
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
17+
<% } %>
18+
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
19+
<% for (var i in
20+
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
21+
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
22+
<% } %>
1723
</head>
1824
<body>
1925
<noscript>

‎public/me.png

62.1 KB
Loading

‎src/permission.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import router from './router'
22
import store from './store'
33
import { getToken } from '@/utils/auth'
44
import { message } from 'ant-design-vue'
5-
5+
import NProgress from 'nprogress'
6+
import 'nprogress/nprogress.css'
67
const whiteList = ['/login', '/auth-redirect']
78

89
function hasPermission(roles:Array<string>, permissionRoles:Array<string>) {
@@ -12,6 +13,7 @@ function hasPermission(roles:Array<string>, permissionRoles:Array<string>) {
1213
}
1314

1415
router.beforeEach((to, from, next) => {
16+
NProgress.start()
1517
if (getToken()) {
1618
if (whiteList.indexOf(to.path) !== -1) {
1719
next()
@@ -48,3 +50,6 @@ router.beforeEach((to, from, next) => {
4850
}
4951
}
5052
})
53+
router.afterEach(() => {
54+
NProgress.done()
55+
})

‎src/shims-vue.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ declare module '*.vue' {
44
}
55

66
declare module 'path-to-regexp'
7+
declare module 'nprogress'
78
declare module 'ant-design-vue/lib/locale-provider/zh_CN'

‎vue.config.js

+23-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
1+
const externals = {
2+
vue: 'Vue',
3+
'vue-router': 'VueRouter',
4+
vuex: 'Vuex',
5+
axios: 'axios'
6+
}
7+
const cdnMap = {
8+
css: [],
9+
js: [
10+
'//unpkg.com/vue@2.6.10/dist/vue.min.js',
11+
'//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js',
12+
'//unpkg.com/vuex@3.1.1/dist/vuex.min.js',
13+
'//unpkg.com/axios@0.19.0/dist/axios.min.js'
14+
]
15+
}
116
module.exports = {
217
publicPath: '/vue-admin-preview/',
318
productionSourceMap: process.env.NODE_ENV !== 'production',
4-
configureWebpack: config => {
5-
config.externals = {
6-
vue: 'Vue',
7-
'vue-router': 'VueRouter',
8-
vuex: 'Vuex',
9-
axios: 'axios'
10-
}
11-
}
19+
chainWebpack: config => {
20+
config.externals(externals)
21+
config.plugin('html').tap(args => {
22+
args[0].cdn = cdnMap
23+
args[0].minify && (args[0].minify.minifyCSS = true) // 压缩html中的css
24+
return args
25+
})
26+
}
1227
// baseUrl: process.env.NODE_ENV === 'production' ? './' : ''
1328
}

‎yarn.lock

+9,789
Large diffs are not rendered by default.

1 commit comments

Comments
 (1)
Please sign in to comment.