4f5d4106 by sunnie

IS_PROD

1 parent 5e2164f1
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)
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!