mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-11-21 16:16:35 +08:00
IS_PROD
This commit is contained in:
parent
5e2164f148
commit
4f5d4106b7
27
README.md
27
README.md
@ -103,8 +103,7 @@ VUE_APP_ENV = 'production'
|
|||||||
变量我们统一在 `src/config/env.*.js` 里进行管理。
|
变量我们统一在 `src/config/env.*.js` 里进行管理。
|
||||||
|
|
||||||
这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢?
|
这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢?
|
||||||
**修改起来方便,不需
|
**修改起来方便,不需要重启项目,符合开发习惯。**
|
||||||
要重启项目,符合开发习惯。**
|
|
||||||
|
|
||||||
config/index.js
|
config/index.js
|
||||||
|
|
||||||
@ -229,7 +228,6 @@ npm i babel-plugin-import -D
|
|||||||
在`babel.config.js` 设置
|
在`babel.config.js` 设置
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
||||||
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
|
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
|
||||||
const plugins = [
|
const plugins = [
|
||||||
[
|
[
|
||||||
@ -246,7 +244,6 @@ module.exports = {
|
|||||||
presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
|
presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
|
||||||
plugins
|
plugins
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 使用组件
|
#### 使用组件
|
||||||
@ -295,7 +292,8 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置
|
|||||||
|
|
||||||
#### 自定义 vant-ui 样式
|
#### 自定义 vant-ui 样式
|
||||||
|
|
||||||
现在我们来说说怎么重写 `vant-ui` 样式。由于 `vant-ui` 的样式我们是在全局引入的,所以你想在某个页面里面覆盖它的样式就不能加 `scoped`,但你又想只覆盖这个页面的 `vant` 样式,你就可在它的父级加一个 `class`,用命名空间来解决问题。
|
现在我们来说说怎么重写 `vant-ui` 样式。由于 `vant-ui` 的样式我们是在全局引入的,所以你想在某个页面里面覆盖它的样式就不能
|
||||||
|
加 `scoped`,但你又想只覆盖这个页面的 `vant` 样式,你就可在它的父级加一个 `class`,用命名空间来解决问题。
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.about-container {
|
.about-container {
|
||||||
@ -316,9 +314,11 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置
|
|||||||
.a >>> .b { /* ... */ }
|
.a >>> .b { /* ... */ }
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 全局变量
|
#### 全局变量
|
||||||
|
|
||||||
`vue.config.js` 配置使用 `css.loaderOptions` 选项,注入 `sass` 的 `mixin` `variables` 到全局,不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量:
|
`vue.config.js` 配置使用 `css.loaderOptions` 选项,注入 `sass` 的 `mixin` `variables` 到全局,不需要手动引入 ,配
|
||||||
|
置`$cdn`通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
|
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
|
||||||
@ -336,10 +336,10 @@ module.exports = {
|
|||||||
@import "assets/css/mixin.scss";
|
@import "assets/css/mixin.scss";
|
||||||
@import "assets/css/variables.scss";
|
@import "assets/css/variables.scss";
|
||||||
$cdn: "${defaultSettings.$cdn}";
|
$cdn: "${defaultSettings.$cdn}";
|
||||||
`,
|
`
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -590,7 +590,7 @@ module.exports = {
|
|||||||
// publicPath: '/app/', // 署应用包时的基本 URL。 vue-router history模式使用
|
// publicPath: '/app/', // 署应用包时的基本 URL。 vue-router history模式使用
|
||||||
outputDir: 'dist', // 生产环境构建文件的目录
|
outputDir: 'dist', // 生产环境构建文件的目录
|
||||||
assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
|
assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
|
||||||
lintOnSave: process.env.NODE_ENV !== IS_PROD,
|
lintOnSave: !IS_PROD,
|
||||||
productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
|
productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
|
||||||
devServer: {
|
devServer: {
|
||||||
port: 9020, // 端口号
|
port: 9020, // 端口号
|
||||||
@ -634,6 +634,7 @@ module.exports = {
|
|||||||
如果你的项目需要跨域设置,你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数
|
如果你的项目需要跨域设置,你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数
|
||||||
|
|
||||||
<u>**!!!注意:你还需要将 `src/config/env.development.js` 里的 `baseApi` 设置成 '/'**</u>
|
<u>**!!!注意:你还需要将 `src/config/env.development.js` 里的 `baseApi` 设置成 '/'**</u>
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
devServer: {
|
devServer: {
|
||||||
@ -667,7 +668,6 @@ export function getUserInfo(params) {
|
|||||||
|
|
||||||
[▲ 回顶部](#top)
|
[▲ 回顶部](#top)
|
||||||
|
|
||||||
|
|
||||||
### <span id="bundle">✅ 配置 打包分析 </span>
|
### <span id="bundle">✅ 配置 打包分析 </span>
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -883,7 +883,6 @@ npm i --save core-js regenerator-runtime
|
|||||||
// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill
|
// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill
|
||||||
import 'core-js/stable'
|
import 'core-js/stable'
|
||||||
import 'regenerator-runtime/runtime'
|
import 'regenerator-runtime/runtime'
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
配置 `babel.config.js`
|
配置 `babel.config.js`
|
||||||
@ -927,6 +926,7 @@ VScode 安装 `eslint` `prettier` `vetur` 插件
|
|||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Vscode setting.json 设置
|
Vscode setting.json 设置
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@ -948,6 +948,7 @@ VScode 安装 `eslint` `prettier` `vetur` 插件
|
|||||||
"vetur.format.defaultFormatter.js": "none",
|
"vetur.format.defaultFormatter.js": "none",
|
||||||
"vetur.format.defaultFormatter.ts": "none",
|
"vetur.format.defaultFormatter.ts": "none",
|
||||||
```
|
```
|
||||||
|
|
||||||
[▲ 回顶部](#top)
|
[▲ 回顶部](#top)
|
||||||
|
|
||||||
# 鸣谢
|
# 鸣谢
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user