一.配置多环境变量
1.package.json
里的 scripts
配置 serve(开发)
test(测试)
build(生产)
"scripts": {
"serve": "vue-cli-service serve --open",
"test": "vue-cli-service build --mode testing",
"build": "vue-cli-service build",
}
2.在根目录创建3个文件 (以.env.*开头)
(1) .env.development 本地开发环境配置
NODE_ENV='development'
(2) .env.testing 测试环境配置
NODE_ENV='testing'
(3) .env.production 正式环境配置
NODE_ENV='production'
3.在src下新建一个config文件,里面创建4个文件夹(以env.*.js)
(1).env.development.js
module.exports = {
baseUrl: 'http://localhost:9018', // 项目地址
}
(2).env.production.js
module.exports = {
baseUrl: 'http://localhost:9018/production', // 项目地址
}
(3).env.testing.js
module.exports = {
baseUrl: 'http://localhost:9018/testing', // 项目地址
}
(4).config/index.js
// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.NODE_ENV)
module.exports = config
(5).在main.js中通过import引入(根据环境不同引入不同baseUrl地址)
import { baseUrl } from '@/config'
console.log(baseUrl)
二.rem适配方案
1.安装依赖
cnpm install lib-flexible postcss-pxtorem --save-dev
postcss-pxtorem 是一款 postcss
插件,用于将单位转化为 rem
lib-flexible用于设置rem基准点
2.main.js中导入
import ‘lib-flexible/flexible’
3.在src下创建.postcssrc.js
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-pxtorem': {
rootValue: 75,
propList: ['*']
}
}
}
三.vant UI组件按需加载
1.通过npm安装
npm i vant -S
2.安装插件
npm i babel-plugin-import -D
3.在babel.config.js中设置
const plugins = [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true
},
'vant'
]
]
module.exports = {
presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
plugins
}
4.在src下创建一个plugins文件夹,里边创建vant.js
// 按需全局引入 vant组件
import Vue from 'vue'
import {Button} from 'vant'
Vue.use(Button)