IS_PROD
Showing
1 changed file
with
73 additions
and
72 deletions
... | @@ -102,9 +102,8 @@ VUE_APP_ENV = 'production' | ... | @@ -102,9 +102,8 @@ VUE_APP_ENV = 'production' |
102 | 这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV `development` `staging` `production` | 102 | 这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV `development` `staging` `production` |
103 | 变量我们统一在 `src/config/env.*.js` 里进行管理。 | 103 | 变量我们统一在 `src/config/env.*.js` 里进行管理。 |
104 | 104 | ||
105 | 这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢? | 105 | 这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢? |
106 | **修改起来方便,不需 | 106 | **修改起来方便,不需要重启项目,符合开发习惯。** |
107 | 要重启项目,符合开发习惯。** | ||
108 | 107 | ||
109 | config/index.js | 108 | config/index.js |
110 | 109 | ||
... | @@ -131,7 +130,7 @@ module.exports = { | ... | @@ -131,7 +130,7 @@ module.exports = { |
131 | 130 | ||
132 | ```javascript | 131 | ```javascript |
133 | // 根据环境不同引入不同baseApi地址 | 132 | // 根据环境不同引入不同baseApi地址 |
134 | import {baseApi} from '@/config' | 133 | import { baseApi } from '@/config' |
135 | console.log(baseApi) | 134 | console.log(baseApi) |
136 | ``` | 135 | ``` |
137 | 136 | ||
... | @@ -226,10 +225,9 @@ module.exports = { | ... | @@ -226,10 +225,9 @@ module.exports = { |
226 | npm i babel-plugin-import -D | 225 | npm i babel-plugin-import -D |
227 | ``` | 226 | ``` |
228 | 227 | ||
229 | 在` babel.config.js` 设置 | 228 | 在`babel.config.js` 设置 |
230 | 229 | ||
231 | ```javascript | 230 | ```javascript |
232 | |||
233 | // 对于使用 babel7 的用户,可以在 babel.config.js 中配置 | 231 | // 对于使用 babel7 的用户,可以在 babel.config.js 中配置 |
234 | const plugins = [ | 232 | const plugins = [ |
235 | [ | 233 | [ |
... | @@ -243,10 +241,9 @@ const plugins = [ | ... | @@ -243,10 +241,9 @@ const plugins = [ |
243 | ] | 241 | ] |
244 | ] | 242 | ] |
245 | module.exports = { | 243 | module.exports = { |
246 | presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]], | 244 | presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]], |
247 | plugins | 245 | plugins |
248 | } | 246 | } |
249 | |||
250 | ``` | 247 | ``` |
251 | 248 | ||
252 | #### 使用组件 | 249 | #### 使用组件 |
... | @@ -256,7 +253,7 @@ module.exports = { | ... | @@ -256,7 +253,7 @@ module.exports = { |
256 | ```javascript | 253 | ```javascript |
257 | // 按需全局引入 vant组件 | 254 | // 按需全局引入 vant组件 |
258 | import Vue from 'vue' | 255 | import Vue from 'vue' |
259 | import {Button, List, Cell, Tabbar, TabbarItem} from 'vant' | 256 | import { Button, List, Cell, Tabbar, TabbarItem } from 'vant' |
260 | Vue.use(Button) | 257 | Vue.use(Button) |
261 | Vue.use(Cell) | 258 | Vue.use(Cell) |
262 | Vue.use(List) | 259 | Vue.use(List) |
... | @@ -273,11 +270,11 @@ Vue.use(Tabbar).use(TabbarItem) | ... | @@ -273,11 +270,11 @@ Vue.use(Tabbar).use(TabbarItem) |
273 | 270 | ||
274 | ```html | 271 | ```html |
275 | <style lang="scss"> | 272 | <style lang="scss"> |
276 | /* global styles */ | 273 | /* global styles */ |
277 | </style> | 274 | </style> |
278 | 275 | ||
279 | <style lang="scss" scoped> | 276 | <style lang="scss" scoped> |
280 | /* local styles */ | 277 | /* local styles */ |
281 | </style> | 278 | </style> |
282 | ``` | 279 | ``` |
283 | 280 | ||
... | @@ -295,15 +292,16 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置 | ... | @@ -295,15 +292,16 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置 |
295 | 292 | ||
296 | #### 自定义 vant-ui 样式 | 293 | #### 自定义 vant-ui 样式 |
297 | 294 | ||
298 | 现在我们来说说怎么重写 `vant-ui` 样式。由于 `vant-ui` 的样式我们是在全局引入的,所以你想在某个页面里面覆盖它的样式就不能加 `scoped`,但你又想只覆盖这个页面的 `vant` 样式,你就可在它的父级加一个 `class`,用命名空间来解决问题。 | 295 | 现在我们来说说怎么重写 `vant-ui` 样式。由于 `vant-ui` 的样式我们是在全局引入的,所以你想在某个页面里面覆盖它的样式就不能 |
296 | 加 `scoped`,但你又想只覆盖这个页面的 `vant` 样式,你就可在它的父级加一个 `class`,用命名空间来解决问题。 | ||
299 | 297 | ||
300 | ```css | 298 | ```css |
301 | .about-container { | 299 | .about-container { |
302 | /* 你的命名空间 */ | 300 | /* 你的命名空间 */ |
303 | .van-button { | 301 | .van-button { |
304 | /* vant-ui 元素*/ | 302 | /* vant-ui 元素*/ |
305 | margin-right: 0px; | 303 | margin-right: 0px; |
306 | } | 304 | } |
307 | } | 305 | } |
308 | ``` | 306 | ``` |
309 | 307 | ||
... | @@ -316,30 +314,32 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置 | ... | @@ -316,30 +314,32 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置 |
316 | .a >>> .b { /* ... */ } | 314 | .a >>> .b { /* ... */ } |
317 | </style> | 315 | </style> |
318 | ``` | 316 | ``` |
317 | |||
319 | #### 全局变量 | 318 | #### 全局变量 |
320 | 319 | ||
321 | `vue.config.js` 配置使用 `css.loaderOptions` 选项,注入 `sass` 的 `mixin` `variables` 到全局,不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量: | 320 | `vue.config.js` 配置使用 `css.loaderOptions` 选项,注入 `sass` 的 `mixin` `variables` 到全局,不需要手动引入 ,配 |
321 | 置`$cdn`通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量: | ||
322 | 322 | ||
323 | ```javascript | 323 | ```javascript |
324 | const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) | 324 | const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) |
325 | const defaultSettings = require('./src/config/index.js') | 325 | const defaultSettings = require('./src/config/index.js') |
326 | module.exports = { | 326 | module.exports = { |
327 | css: { | 327 | css: { |
328 | extract: IS_PROD, | 328 | extract: IS_PROD, |
329 | sourceMap: false, | 329 | sourceMap: false, |
330 | loaderOptions: { | 330 | loaderOptions: { |
331 | // 给 scss-loader 传递选项 | 331 | // 给 scss-loader 传递选项 |
332 | scss: { | 332 | scss: { |
333 | // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn | 333 | // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn |
334 | // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders | 334 | // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders |
335 | prependData: ` | 335 | prependData: ` |
336 | @import "assets/css/mixin.scss"; | 336 | @import "assets/css/mixin.scss"; |
337 | @import "assets/css/variables.scss"; | 337 | @import "assets/css/variables.scss"; |
338 | $cdn: "${defaultSettings.$cdn}"; | 338 | $cdn: "${defaultSettings.$cdn}"; |
339 | `, | 339 | ` |
340 | }, | 340 | } |
341 | }, | 341 | } |
342 | }, | 342 | } |
343 | } | 343 | } |
344 | ``` | 344 | ``` |
345 | 345 | ||
... | @@ -359,14 +359,14 @@ Vue.prototype.$cdn = $cdn | ... | @@ -359,14 +359,14 @@ Vue.prototype.$cdn = $cdn |
359 | 359 | ||
360 | ```html | 360 | ```html |
361 | <script> | 361 | <script> |
362 | console.log(this.$cdn) | 362 | console.log(this.$cdn) |
363 | </script> | 363 | </script> |
364 | <style lang="scss" scoped> | 364 | <style lang="scss" scoped> |
365 | .logo { | 365 | .logo { |
366 | width: 120px; | 366 | width: 120px; |
367 | height: 120px; | 367 | height: 120px; |
368 | background: url($cdn+'/weapp/logo.png') center / contain no-repeat; | 368 | background: url($cdn+'/weapp/logo.png') center / contain no-repeat; |
369 | } | 369 | } |
370 | </style> | 370 | </style> |
371 | ``` | 371 | ``` |
372 | 372 | ||
... | @@ -402,7 +402,7 @@ new Vue({ | ... | @@ -402,7 +402,7 @@ new Vue({ |
402 | 402 | ||
403 | ```html | 403 | ```html |
404 | <script> | 404 | <script> |
405 | import {mapGetters} from 'vuex' | 405 | import { mapGetters } from 'vuex' |
406 | export default { | 406 | export default { |
407 | computed: { | 407 | computed: { |
408 | ...mapGetters(['userName']) | 408 | ...mapGetters(['userName']) |
... | @@ -448,7 +448,7 @@ const createRouter = () => | ... | @@ -448,7 +448,7 @@ const createRouter = () => |
448 | new Router({ | 448 | new Router({ |
449 | // mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath | 449 | // mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath |
450 | // base: '/app/', | 450 | // base: '/app/', |
451 | scrollBehavior: () => ({y: 0}), | 451 | scrollBehavior: () => ({ y: 0 }), |
452 | routes: router | 452 | routes: router |
453 | }) | 453 | }) |
454 | 454 | ||
... | @@ -470,9 +470,9 @@ export default createRouter() | ... | @@ -470,9 +470,9 @@ export default createRouter() |
470 | ```javascript | 470 | ```javascript |
471 | import axios from 'axios' | 471 | import axios from 'axios' |
472 | import store from '@/store' | 472 | import store from '@/store' |
473 | import {Toast} from 'vant' | 473 | import { Toast } from 'vant' |
474 | // 根据环境不同引入不同api地址 | 474 | // 根据环境不同引入不同api地址 |
475 | import {baseApi} from '@/config' | 475 | import { baseApi } from '@/config' |
476 | // create an axios instance | 476 | // create an axios instance |
477 | const service = axios.create({ | 477 | const service = axios.create({ |
478 | baseURL: baseApi, // url = base api url + request url | 478 | baseURL: baseApi, // url = base api url + request url |
... | @@ -558,9 +558,9 @@ export function getUserInfo(params) { | ... | @@ -558,9 +558,9 @@ export function getUserInfo(params) { |
558 | 558 | ||
559 | ```javascript | 559 | ```javascript |
560 | // 请求接口 | 560 | // 请求接口 |
561 | import {getUserInfo} from '@/api/user.js' | 561 | import { getUserInfo } from '@/api/user.js' |
562 | 562 | ||
563 | const params = {user: 'sunnie'} | 563 | const params = { user: 'sunnie' } |
564 | getUserInfo(params) | 564 | getUserInfo(params) |
565 | .then(() => {}) | 565 | .then(() => {}) |
566 | .catch(() => {}) | 566 | .catch(() => {}) |
... | @@ -590,7 +590,7 @@ module.exports = { | ... | @@ -590,7 +590,7 @@ module.exports = { |
590 | // publicPath: '/app/', // 署应用包时的基本 URL。 vue-router history模式使用 | 590 | // publicPath: '/app/', // 署应用包时的基本 URL。 vue-router history模式使用 |
591 | outputDir: 'dist', // 生产环境构建文件的目录 | 591 | outputDir: 'dist', // 生产环境构建文件的目录 |
592 | assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 | 592 | assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 |
593 | lintOnSave: process.env.NODE_ENV !== IS_PROD, | 593 | lintOnSave: !IS_PROD, |
594 | productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 | 594 | productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 |
595 | devServer: { | 595 | devServer: { |
596 | port: 9020, // 端口号 | 596 | port: 9020, // 端口号 |
... | @@ -634,6 +634,7 @@ module.exports = { | ... | @@ -634,6 +634,7 @@ module.exports = { |
634 | 如果你的项目需要跨域设置,你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数 | 634 | 如果你的项目需要跨域设置,你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数 |
635 | 635 | ||
636 | <u>**!!!注意:你还需要将 `src/config/env.development.js` 里的 `baseApi` 设置成 '/'**</u> | 636 | <u>**!!!注意:你还需要将 `src/config/env.development.js` 里的 `baseApi` 设置成 '/'**</u> |
637 | |||
637 | ```javascript | 638 | ```javascript |
638 | module.exports = { | 639 | module.exports = { |
639 | devServer: { | 640 | devServer: { |
... | @@ -667,7 +668,6 @@ export function getUserInfo(params) { | ... | @@ -667,7 +668,6 @@ export function getUserInfo(params) { |
667 | 668 | ||
668 | [▲ 回顶部](#top) | 669 | [▲ 回顶部](#top) |
669 | 670 | ||
670 | |||
671 | ### <span id="bundle">✅ 配置 打包分析 </span> | 671 | ### <span id="bundle">✅ 配置 打包分析 </span> |
672 | 672 | ||
673 | ```javascript | 673 | ```javascript |
... | @@ -810,7 +810,7 @@ if (IS_PROD) { | ... | @@ -810,7 +810,7 @@ if (IS_PROD) { |
810 | } | 810 | } |
811 | 811 | ||
812 | module.exports = { | 812 | module.exports = { |
813 | presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]], | 813 | presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]], |
814 | plugins | 814 | plugins |
815 | } | 815 | } |
816 | ``` | 816 | ``` |
... | @@ -883,7 +883,6 @@ npm i --save core-js regenerator-runtime | ... | @@ -883,7 +883,6 @@ npm i --save core-js regenerator-runtime |
883 | // https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill | 883 | // https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill |
884 | import 'core-js/stable' | 884 | import 'core-js/stable' |
885 | import 'regenerator-runtime/runtime' | 885 | import 'regenerator-runtime/runtime' |
886 | |||
887 | ``` | 886 | ``` |
888 | 887 | ||
889 | 配置 `babel.config.js` | 888 | 配置 `babel.config.js` |
... | @@ -892,42 +891,43 @@ import 'regenerator-runtime/runtime' | ... | @@ -892,42 +891,43 @@ import 'regenerator-runtime/runtime' |
892 | const plugins = [] | 891 | const plugins = [] |
893 | 892 | ||
894 | module.exports = { | 893 | module.exports = { |
895 | presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]], | 894 | presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]], |
896 | plugins | 895 | plugins |
897 | } | 896 | } |
898 | ``` | 897 | ``` |
899 | 898 | ||
900 | [▲ 回顶部](#top) | 899 | [▲ 回顶部](#top) |
901 | 900 | ||
902 | ### <span id="pettier">✅ Eslint + Pettier 统一开发规范 </span> | 901 | ### <span id="pettier">✅ Eslint + Pettier 统一开发规范 </span> |
903 | 902 | ||
904 | VScode 安装 `eslint` `prettier` `vetur` 插件 | 903 | VScode 安装 `eslint` `prettier` `vetur` 插件 |
905 | 904 | ||
906 | 在文件 `.prettierrc` 里写 属于你的 pettier 规则 | 905 | 在文件 `.prettierrc` 里写 属于你的 pettier 规则 |
907 | 906 | ||
908 | ```bash | 907 | ```bash |
909 | { | 908 | { |
910 | "printWidth": 120, | 909 | "printWidth": 120, |
911 | "tabWidth": 2, | 910 | "tabWidth": 2, |
912 | "singleQuote": true, | 911 | "singleQuote": true, |
913 | "trailingComma": "none", | 912 | "trailingComma": "none", |
914 | "semi": false, | 913 | "semi": false, |
915 | "wrap_line_length": 120, | 914 | "wrap_line_length": 120, |
916 | "wrap_attributes": "auto", | 915 | "wrap_attributes": "auto", |
917 | "proseWrap": "always", | 916 | "proseWrap": "always", |
918 | "arrowParens": "avoid", | 917 | "arrowParens": "avoid", |
919 | "bracketSpacing": false, | 918 | "bracketSpacing": false, |
920 | "jsxBracketSameLine": true, | 919 | "jsxBracketSameLine": true, |
921 | "useTabs": false, | 920 | "useTabs": false, |
922 | "overrides": [{ | 921 | "overrides": [{ |
923 | "files": ".prettierrc", | 922 | "files": ".prettierrc", |
924 | "options": { | 923 | "options": { |
925 | "parser": "json" | 924 | "parser": "json" |
926 | } | 925 | } |
927 | }] | 926 | }] |
928 | } | 927 | } |
929 | ``` | 928 | ``` |
930 | Vscode setting.json 设置 | 929 | |
930 | Vscode setting.json 设置 | ||
931 | 931 | ||
932 | ```bash | 932 | ```bash |
933 | "[vue]": { | 933 | "[vue]": { |
... | @@ -948,9 +948,10 @@ VScode 安装 `eslint` `prettier` `vetur` 插件 | ... | @@ -948,9 +948,10 @@ VScode 安装 `eslint` `prettier` `vetur` 插件 |
948 | "vetur.format.defaultFormatter.js": "none", | 948 | "vetur.format.defaultFormatter.js": "none", |
949 | "vetur.format.defaultFormatter.ts": "none", | 949 | "vetur.format.defaultFormatter.ts": "none", |
950 | ``` | 950 | ``` |
951 | |||
951 | [▲ 回顶部](#top) | 952 | [▲ 回顶部](#top) |
952 | 953 | ||
953 | # 鸣谢 | 954 | # 鸣谢 |
954 | 955 | ||
955 | [vue-cli4-config](https://github.com/staven630/vue-cli4-config) | 956 | [vue-cli4-config](https://github.com/staven630/vue-cli4-config) |
956 | [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) | 957 | [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) | ... | ... |
-
Please register or sign in to post a comment