4f5d4106 by sunnie

IS_PROD

1 parent 5e2164f1
Showing 1 changed file with 31 additions and 30 deletions
...@@ -103,8 +103,7 @@ VUE_APP_ENV = 'production' ...@@ -103,8 +103,7 @@ VUE_APP_ENV = '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)
...@@ -295,7 +292,8 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置 ...@@ -295,7 +292,8 @@ 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 {
...@@ -316,9 +314,11 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置 ...@@ -316,9 +314,11 @@ 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)
...@@ -336,10 +336,10 @@ module.exports = { ...@@ -336,10 +336,10 @@ module.exports = {
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
...@@ -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,7 +891,7 @@ import 'regenerator-runtime/runtime' ...@@ -892,7 +891,7 @@ 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 ```
...@@ -905,8 +904,8 @@ VScode 安装 `eslint` `prettier` `vetur` 插件 ...@@ -905,8 +904,8 @@ 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,
...@@ -926,8 +925,9 @@ VScode 安装 `eslint` `prettier` `vetur` 插件 ...@@ -926,8 +925,9 @@ VScode 安装 `eslint` `prettier` `vetur` 插件
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!