一.配置多環境變數
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='production'
(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)轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/296615.html
標籤：其他
上一篇：Java專案:慢病報銷管理資訊系統(java+MySQL+Jdbc+Servlert+Jsp)
下一篇：js中一些常用的正則