5f3bc05b by sunnie1992

readme add vw and update npm

1 parent bc90d276
...@@ -3,66 +3,98 @@ module.exports = { ...@@ -3,66 +3,98 @@ module.exports = {
3 env: { 3 env: {
4 node: true 4 node: true
5 }, 5 },
6 extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'], 6 extends: ['plugin:vue/essential', 'eslint:recommended'],
7 parserOptions: { 7 parserOptions: {
8 parser: 'babel-eslint' 8 parser: 'babel-eslint'
9 }, 9 },
10 rules: { 10 rules: {
11 "vue/max-attributes-per-line": [2, { 11 'vue/max-attributes-per-line': [
12 "singleline": 10, 12 2,
13 "multiline": { 13 {
14 "max": 1, 14 singleline: 10,
15 "allowFirstLine": false 15 multiline: {
16 } 16 max: 1,
17 }], 17 allowFirstLine: false
18 "vue/singleline-html-element-content-newline": "off", 18 }
19 "vue/multiline-html-element-content-newline":"off", 19 }
20 "vue/name-property-casing": ["error", "PascalCase"], 20 ],
21 "vue/no-v-html": "off", 21 'vue/singleline-html-element-content-newline': 'off',
22 'vue/multiline-html-element-content-newline': 'off',
23 'vue/name-property-casing': ['error', 'PascalCase'],
24 'vue/no-v-html': 'off',
22 'accessor-pairs': 2, 25 'accessor-pairs': 2,
23 'arrow-spacing': [2, { 26 'arrow-spacing': [
24 'before': true, 27 2,
25 'after': true 28 {
26 }], 29 before: true,
30 after: true
31 }
32 ],
27 'block-spacing': [2, 'always'], 33 'block-spacing': [2, 'always'],
28 'brace-style': [2, '1tbs', { 34 'brace-style': [
29 'allowSingleLine': true 35 2,
30 }], 36 '1tbs',
31 'camelcase': [0, { 37 {
32 'properties': 'always' 38 allowSingleLine: true
33 }], 39 }
40 ],
41 camelcase: [
42 0,
43 {
44 properties: 'always'
45 }
46 ],
34 'comma-dangle': [2, 'never'], 47 'comma-dangle': [2, 'never'],
35 'comma-spacing': [2, { 48 'comma-spacing': [
36 'before': false, 49 2,
37 'after': true 50 {
38 }], 51 before: false,
52 after: true
53 }
54 ],
39 'comma-style': [2, 'last'], 55 'comma-style': [2, 'last'],
40 'constructor-super': 2, 56 'constructor-super': 2,
41 'curly': [2, 'multi-line'], 57 curly: [2, 'multi-line'],
42 'dot-location': [2, 'property'], 58 'dot-location': [2, 'property'],
43 'eol-last': 2, 59 'eol-last': 2,
44 'eqeqeq': ["error", "always", {"null": "ignore"}], 60 eqeqeq: ['error', 'always', { null: 'ignore' }],
45 'generator-star-spacing': [2, { 61 'generator-star-spacing': [
46 'before': true, 62 2,
47 'after': true 63 {
48 }], 64 before: true,
65 after: true
66 }
67 ],
49 'handle-callback-err': [2, '^(err|error)$'], 68 'handle-callback-err': [2, '^(err|error)$'],
50 'indent': [2, 2, { 69 indent: [
51 'SwitchCase': 1 70 2,
52 }], 71 2,
72 {
73 SwitchCase: 1
74 }
75 ],
53 'jsx-quotes': [2, 'prefer-single'], 76 'jsx-quotes': [2, 'prefer-single'],
54 'key-spacing': [2, { 77 'key-spacing': [
55 'beforeColon': false, 78 2,
56 'afterColon': true 79 {
57 }], 80 beforeColon: false,
58 'keyword-spacing': [2, { 81 afterColon: true
59 'before': true, 82 }
60 'after': true 83 ],
61 }], 84 'keyword-spacing': [
62 'new-cap': [2, { 85 2,
63 'newIsCap': true, 86 {
64 'capIsNew': false 87 before: true,
65 }], 88 after: true
89 }
90 ],
91 'new-cap': [
92 2,
93 {
94 newIsCap: true,
95 capIsNew: false
96 }
97 ],
66 'new-parens': 2, 98 'new-parens': 2,
67 'no-array-constructor': 2, 99 'no-array-constructor': 2,
68 'no-caller': 2, 100 'no-caller': 2,
...@@ -93,17 +125,23 @@ module.exports = { ...@@ -93,17 +125,23 @@ module.exports = {
93 'no-irregular-whitespace': 2, 125 'no-irregular-whitespace': 2,
94 'no-iterator': 2, 126 'no-iterator': 2,
95 'no-label-var': 2, 127 'no-label-var': 2,
96 'no-labels': [2, { 128 'no-labels': [
97 'allowLoop': false, 129 2,
98 'allowSwitch': false 130 {
99 }], 131 allowLoop: false,
132 allowSwitch: false
133 }
134 ],
100 'no-lone-blocks': 2, 135 'no-lone-blocks': 2,
101 'no-mixed-spaces-and-tabs': 2, 136 'no-mixed-spaces-and-tabs': 2,
102 'no-multi-spaces': 2, 137 'no-multi-spaces': 2,
103 'no-multi-str': 2, 138 'no-multi-str': 2,
104 'no-multiple-empty-lines': [2, { 139 'no-multiple-empty-lines': [
105 'max': 1 140 2,
106 }], 141 {
142 max: 1
143 }
144 ],
107 'no-native-reassign': 2, 145 'no-native-reassign': 2,
108 'no-negated-in-lhs': 2, 146 'no-negated-in-lhs': 2,
109 'no-new-object': 2, 147 'no-new-object': 2,
...@@ -131,62 +169,93 @@ module.exports = { ...@@ -131,62 +169,93 @@ module.exports = {
131 'no-undef-init': 2, 169 'no-undef-init': 2,
132 'no-unexpected-multiline': 2, 170 'no-unexpected-multiline': 2,
133 'no-unmodified-loop-condition': 2, 171 'no-unmodified-loop-condition': 2,
134 'no-unneeded-ternary': [2, { 172 'no-unneeded-ternary': [
135 'defaultAssignment': false 173 2,
136 }], 174 {
175 defaultAssignment: false
176 }
177 ],
137 'no-unreachable': 2, 178 'no-unreachable': 2,
138 'no-unsafe-finally': 2, 179 'no-unsafe-finally': 2,
139 'no-unused-vars': [2, { 180 'no-unused-vars': [
140 'vars': 'all', 181 2,
141 'args': 'none' 182 {
142 }], 183 vars: 'all',
184 args: 'none'
185 }
186 ],
143 'no-useless-call': 2, 187 'no-useless-call': 2,
144 'no-useless-computed-key': 2, 188 'no-useless-computed-key': 2,
145 'no-useless-constructor': 2, 189 'no-useless-constructor': 2,
146 'no-useless-escape': 0, 190 'no-useless-escape': 0,
147 'no-whitespace-before-property': 2, 191 'no-whitespace-before-property': 2,
148 'no-with': 2, 192 'no-with': 2,
149 'one-var': [2, { 193 'one-var': [
150 'initialized': 'never' 194 2,
151 }], 195 {
152 'operator-linebreak': [2, 'after', { 196 initialized: 'never'
153 'overrides': { 197 }
154 '?': 'before', 198 ],
155 ':': 'before' 199 'operator-linebreak': [
156 } 200 2,
157 }], 201 'after',
202 {
203 overrides: {
204 '?': 'before',
205 ':': 'before'
206 }
207 }
208 ],
158 'padded-blocks': [2, 'never'], 209 'padded-blocks': [2, 'never'],
159 'quotes': [2, 'single', { 210 quotes: [
160 'avoidEscape': true, 211 2,
161 'allowTemplateLiterals': true 212 'single',
162 }], 213 {
163 'semi': [2, 'never'], 214 avoidEscape: true,
164 'semi-spacing': [2, { 215 allowTemplateLiterals: true
165 'before': false, 216 }
166 'after': true 217 ],
167 }], 218 semi: [2, 'never'],
219 'semi-spacing': [
220 2,
221 {
222 before: false,
223 after: true
224 }
225 ],
168 'space-before-blocks': [2, 'always'], 226 'space-before-blocks': [2, 'always'],
169 'space-before-function-paren': [2, 'never'], 227 'space-before-function-paren': [2, 'never'],
170 'space-in-parens': [2, 'never'], 228 'space-in-parens': [2, 'never'],
171 'space-infix-ops': 2, 229 'space-infix-ops': 2,
172 'space-unary-ops': [2, { 230 'space-unary-ops': [
173 'words': true, 231 2,
174 'nonwords': false 232 {
175 }], 233 words: true,
176 'spaced-comment': [2, 'always', { 234 nonwords: false
177 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] 235 }
178 }], 236 ],
237 'spaced-comment': [
238 2,
239 'always',
240 {
241 markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
242 }
243 ],
179 'template-curly-spacing': [2, 'never'], 244 'template-curly-spacing': [2, 'never'],
180 'use-isnan': 2, 245 'use-isnan': 2,
181 'valid-typeof': 2, 246 'valid-typeof': 2,
182 'wrap-iife': [2, 'any'], 247 'wrap-iife': [2, 'any'],
183 'yield-star-spacing': [2, 'both'], 248 'yield-star-spacing': [2, 'both'],
184 'yoda': [2, 'never'], 249 yoda: [2, 'never'],
185 'prefer-const': 2, 250 'prefer-const': 2,
186 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 251 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
187 'object-curly-spacing': [2, 'always', { 252 'object-curly-spacing': [
188 objectsInObjects: false 253 2,
189 }], 254 'always',
255 {
256 objectsInObjects: false
257 }
258 ],
190 'array-bracket-spacing': [2, 'never'] 259 'array-bracket-spacing': [2, 'never']
191 } 260 }
192 } 261 }
......
...@@ -168,7 +168,8 @@ module.exports = { ...@@ -168,7 +168,8 @@ module.exports = {
168 168
169 **新手必看,老鸟跳过** 169 **新手必看,老鸟跳过**
170 170
171 很多小伙伴会问我,适配的问题。 171 很多小伙伴会问我,适配的问题,因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上
172 传到蓝湖,我们就可以需要的尺寸了。下面就大搞普及一下 rem。
172 173
173 我们知道 `1rem` 等于`html` 根元素设定的 `font-size``px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 174 我们知道 `1rem` 等于`html` 根元素设定的 `font-size``px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下
174 看到 (`1rem 等于 37.5px`): 175 看到 (`1rem 等于 37.5px`):
...@@ -210,6 +211,62 @@ module.exports = { ...@@ -210,6 +211,62 @@ module.exports = {
210 211
211 [▲ 回顶部](#top) 212 [▲ 回顶部](#top)
212 213
214 ### <span id="vw">✅ vm 适配方案 </span>
215
216 本项目使用的是 rem 的 适配方案,其实无论你使用哪种方案,都不需要你去计算 12px 是多少 rem 或者 vw, 会有专门的工具去帮你做
217 。如果你想用 vw,你可以按照下面的方式切换。
218
219 #### 1.安装依赖
220
221 ```bash
222
223 npm install postcss-px-to-viewport -D
224
225 ```
226
227 #### 2.修改 .postcssrc.js
228
229 将根目录下 .postcssrc.js 文件修改如下
230
231 ```javascript
232 // https://github.com/michael-ciniawsky/postcss-load-config
233 module.exports = {
234 plugins: {
235 autoprefixer: {
236 overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
237 },
238 'postcss-px-to-viewport': {
239 viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
240 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
241 viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
242 selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
243 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
244 mediaQuery: false // 允许在媒体查询中转换`px`
245 }
246 }
247 }
248 ```
249
250 #### 3.删除原来的 rem 相关代码
251
252 src/main.js 删除如下代码
253
254 ```javascript
255 // 移动端适配
256 import 'lib-flexible/flexible.js'
257 ```
258
259 package.json 删除如下代码
260
261 ```javascript
262 "lib-flexible": "^0.3.2",
263 "postcss-pxtorem": "^5.1.1",
264 ```
265
266 运行起来,F12 元素 css 就是 vw 单位了
267
268 [▲ 回顶部](#top)
269
213 ### <span id="vant">✅ VantUI 组件按需加载 </span> 270 ### <span id="vant">✅ VantUI 组件按需加载 </span>
214 271
215 项目采 272 项目采
...@@ -365,7 +422,7 @@ Vue.prototype.$cdn = $cdn ...@@ -365,7 +422,7 @@ Vue.prototype.$cdn = $cdn
365 .logo { 422 .logo {
366 width: 120px; 423 width: 120px;
367 height: 120px; 424 height: 120px;
368 background: url($cdn+'/weapp/logo.png') center / contain no-repeat; 425 background: url($cdn + '/weapp/logo.png') center / contain no-repeat;
369 } 426 }
370 </style> 427 </style>
371 ``` 428 ```
...@@ -900,7 +957,8 @@ module.exports = { ...@@ -900,7 +957,8 @@ module.exports = {
900 957
901 ### <span id="pettier">✅ Eslint + Pettier 统一开发规范 </span> 958 ### <span id="pettier">✅ Eslint + Pettier 统一开发规范 </span>
902 959
903 VScode 安装 `eslint` `prettier` `vetur` 插件 960 VScode (版本 1.47.3)安装 `eslint` `prettier` `vetur` 插件 `.vue` 文件使用 vetur 进行格式化,其他使用`prettier`,后面会
961 专门写个如何使用配合使用这三个玩意
904 962
905 在文件 `.prettierrc` 里写 属于你的 pettier 规则 963 在文件 `.prettierrc` 里写 属于你的 pettier 规则
906 964
...@@ -930,30 +988,144 @@ VScode 安装 `eslint` `prettier` `vetur` 插件 ...@@ -930,30 +988,144 @@ VScode 安装 `eslint` `prettier` `vetur` 插件
930 Vscode setting.json 设置 988 Vscode setting.json 设置
931 989
932 ```bash 990 ```bash
933 "[vue]": { 991 {
934 "editor.defaultFormatter": "esbenp.prettier-vscode" 992 // 将设置放入此文件中以覆盖默认设置
935 }, 993 "files.autoSave": "off",
936 "[javascript]": { 994 // 控制字体系列。
937 "editor.defaultFormatter": "esbenp.prettier-vscode" 995 "editor.fontFamily": "Consolas, 'Courier New', monospace,'宋体'",
938 }, 996 "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
939 // 保存时用eslint格式化 997 // 以像素为单位控制字号。
940 "editor.codeActionsOnSave": { 998 "editor.fontSize": 16,
941 "source.fixAll.eslint": true 999 // 控制选取范围是否有圆角
1000 "editor.roundedSelection": false,
1001 // 建议小组件的字号
1002 "editor.suggestFontSize": 16,
1003 // 在“打开的编辑器”窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。
1004 "explorer.openEditors.visible": 0,
1005 // 是否已启用自动刷新
1006 "git.autorefresh": true,
1007 // 以像素为单位控制终端的字号,这是 editor.fontSize 的默认值。
1008 "terminal.integrated.fontSize": 14,
1009 // 控制终端游标是否闪烁。
1010 "terminal.integrated.cursorBlinking": true,
1011 // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
1012 // Tab Size
1013 "editor.tabSize": 2,
1014 // By default, common template. Do not modify it!!!!!
1015 "editor.formatOnType": true,
1016 "window.zoomLevel": 0,
1017 "editor.detectIndentation": false,
1018 "css.fileExtensions": ["css", "scss"],
1019 "files.associations": {
1020 "*.string": "html",
1021 "*.vue": "vue",
1022 "*.wxss": "css",
1023 "*.wxml": "wxml",
1024 "*.wxs": "javascript",
1025 "*.cjson": "jsonc",
1026 "*.js": "javascript"
1027 },
1028 // 为指定的语法定义配置文件或使用带有特定规则的配置文件。
1029 "emmet.syntaxProfiles": {
1030 "vue-html": "html",
1031 "vue": "html"
1032 },
1033 "search.exclude": {
1034 "**/node_modules": true,
1035 "**/bower_components": true
1036 },
1037 //保存时eslint自动修复错误
1038 "editor.formatOnSave": true,
1039 // Enable per-language
1040 //配置 ESLint 检查的文件类型
1041 "editor.quickSuggestions": {
1042 "strings": true
1043 },
1044 // 添加 vue 支持
1045 // 这里是针对vue文件的格式化设置,vue的规则在这里生效
1046 "vetur.format.options.tabSize": 2,
1047 "vetur.format.options.useTabs": false,
1048 "vetur.format.defaultFormatter.html": "js-beautify-html",
1049 "vetur.format.defaultFormatter.css": "prettier",
1050 "vetur.format.defaultFormatter.scss": "prettier",
1051 "vetur.format.defaultFormatter.postcss": "prettier",
1052 "vetur.format.defaultFormatter.less": "prettier",
1053 "vetur.format.defaultFormatter.js": "vscode-typescript",
1054 "vetur.format.defaultFormatter.sass": "sass-formatter",
1055 "vetur.format.defaultFormatter.ts": "prettier",
1056 "vetur.format.defaultFormatterOptions": {
1057 "js-beautify-html": {
1058 "wrap_attributes": "aligned-multiple", // 超过150折行
1059 "wrap-line-length": 150
942 }, 1060 },
943 // 两者会在格式化js时冲突,所以需要关闭默认js格式化程序 1061 // #vue组件中html代码格式化样式
944 "javascript.format.enable": false, 1062 "prettier": {
945 "typescript.format.enable": false, 1063 "printWidth": 120,
946 "vetur.format.defaultFormatter.html": "none", 1064 "tabWidth": 2,
947 // js/ts程序用eslint,防止vetur中的prettier与eslint格式化冲突 1065 "singleQuote": false,
948 "vetur.format.defaultFormatter.js": "none", 1066 "trailingComma": "none",
949 "vetur.format.defaultFormatter.ts": "none", 1067 "semi": false,
1068 "wrap_line_length": 120,
1069 "wrap_attributes": "aligned-multiple", // 超过150折行
1070 "proseWrap": "always",
1071 "arrowParens": "avoid",
1072 "bracketSpacing": true,
1073 "jsxBracketSameLine": true,
1074 "useTabs": false,
1075 "overrides": [
1076 {
1077 "files": ".prettierrc",
1078 "options": {
1079 "parser": "json"
1080 }
1081 }
1082 ]
1083 }
1084 },
1085 // Enable per-language
1086 "[json]": {
1087 "editor.defaultFormatter": "esbenp.prettier-vscode"
1088 },
1089 "vetur.validation.template": false,
1090 "html.format.enable": false,
1091 "json.format.enable": false,
1092 "javascript.format.enable": false,
1093 "typescript.format.enable": false,
1094 "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
1095 "[html]": {
1096 "editor.defaultFormatter": "esbenp.prettier-vscode"
1097 },
1098 "[javascript]": {
1099 "editor.defaultFormatter": "esbenp.prettier-vscode"
1100 },
1101 "[jsonc]": {
1102 "editor.defaultFormatter": "esbenp.prettier-vscode"
1103 },
1104 "[vue]": {
1105 "editor.defaultFormatter": "octref.vetur"
1106 },
1107 "emmet.includeLanguages": {
1108 "wxml": "html"
1109 },
1110 "[typescriptreact]": {
1111 "editor.defaultFormatter": "esbenp.prettier-vscode"
1112 },
1113 // 开启eslint自动修复js/ts功能
1114 "editor.codeActionsOnSave": {
1115 "source.fixAll.eslint": true
1116 },
1117 "minapp-vscode.disableAutoConfig": true,
1118 "javascript.implicitProjectConfig.experimentalDecorators": true,
1119 "editor.maxTokenizationLineLength": 200000
1120 }
1121
950 ``` 1122 ```
951 1123
952 [▲ 回顶部](#top) 1124 [▲ 回顶部](#top)
953 1125
954 # 鸣谢 ​ 1126 # 鸣谢 ​
955 1127
956 [vue-cli4-config](https://github.com/staven630/vue-cli4-config) 1128 [vue-cli4-config](https://github.com/staven630/vue-cli4-config)
957 [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) 1129 [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
958 1130
959 # 关于我 1131 # 关于我
......
This diff could not be displayed because it is too large.
1 { 1 {
2 "name": "vue-h5-template", 2 "name": "vue-h5-template",
3 "version": "2.0.0", 3 "version": "2.1.0",
4 "description": "A vue h5 template with Vant UI", 4 "description": "A vue h5 template with Vant UI",
5 "author": "Sunnie <sunniejs@163.com>", 5 "author": "Sunnie <sunniejs@163.com>",
6 "private": true, 6 "private": true,
...@@ -16,28 +16,27 @@ ...@@ -16,28 +16,27 @@
16 "lib-flexible": "^0.3.2", 16 "lib-flexible": "^0.3.2",
17 "lodash": "^4.17.15", 17 "lodash": "^4.17.15",
18 "regenerator-runtime": "^0.13.5", 18 "regenerator-runtime": "^0.13.5",
19 "vant": "^2.4.7", 19 "vant": "^2.10.2",
20 "vue": "^2.6.11", 20 "vue": "^2.6.11",
21 "vue-router": "^3.1.5", 21 "vue-router": "^3.2.0",
22 "vuex": "^3.1.2" 22 "vuex": "^3.4.0"
23 }, 23 },
24 "devDependencies": { 24 "devDependencies": {
25 "@vue/cli-plugin-babel": "~4.3.0", 25 "@vue/cli-plugin-babel": "~4.5.0",
26 "@vue/cli-plugin-eslint": "~4.3.0", 26 "@vue/cli-plugin-eslint": "~4.5.0",
27 "@vue/cli-service": "~4.3.0", 27 "@vue/cli-plugin-router": "~4.5.0",
28 "@vue/eslint-config-prettier": "^6.0.0", 28 "@vue/cli-plugin-vuex": "~4.5.0",
29 "babel-eslint": "^10.0.3", 29 "@vue/cli-service": "~4.5.0",
30 "babel-eslint": "^10.1.0",
30 "babel-plugin-import": "^1.13.0", 31 "babel-plugin-import": "^1.13.0",
31 "babel-plugin-transform-remove-console": "^6.9.4", 32 "babel-plugin-transform-remove-console": "^6.9.4",
32 "eslint": "^6.7.2", 33 "eslint": "^6.7.2",
33 "eslint-plugin-prettier": "^3.1.1",
34 "eslint-plugin-vue": "^6.2.2", 34 "eslint-plugin-vue": "^6.2.2",
35 "node-sass": "^4.13.1", 35 "node-sass": "^4.14.1",
36 "postcss-pxtorem": "^4.0.1", 36 "postcss-pxtorem": "^5.1.1",
37 "prettier": "^1.19.1",
38 "sass-loader": "^8.0.2", 37 "sass-loader": "^8.0.2",
39 "script-ext-html-webpack-plugin": "^2.1.4", 38 "script-ext-html-webpack-plugin": "^2.1.4",
40 "vue-template-compiler": "^2.6.11", 39 "vue-template-compiler": "^2.6.11",
41 "webpack-bundle-analyzer": "^3.7.0" 40 "webpack-bundle-analyzer": "^3.8.0"
42 } 41 }
43 } 42 }
......
...@@ -6,6 +6,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl ...@@ -6,6 +6,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
6 const resolve = dir => path.join(__dirname, dir) 6 const resolve = dir => path.join(__dirname, dir)
7 // page title 7 // page title
8 const name = defaultSettings.title || 'vue mobile template' 8 const name = defaultSettings.title || 'vue mobile template'
9 // 生产环境,测试和正式
9 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) 10 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
10 11
11 // externals 12 // externals
...@@ -64,7 +65,7 @@ module.exports = { ...@@ -64,7 +65,7 @@ module.exports = {
64 // } 65 // }
65 }, 66 },
66 css: { 67 css: {
67 extract: IS_PROD, //是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。 68 extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
68 sourceMap: false, 69 sourceMap: false,
69 loaderOptions: { 70 loaderOptions: {
70 scss: { 71 scss: {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!