vue分环境配置变量及打包
一,环境配置
a,主要环境: dev prod test
vue项目根目录下新建配置文件
.env.dev
NODE_ENV="development"
BASE_URL="/admin"
VUE_APP_UPLOAD_URL='http://y.yy.com:8080'
VUE_APP_LOGIN='false'
.env.prod
NODE_ENV="production"
BASE_URL="/"
VUE_APP_UPLOAD_URL='http://x.xx.com:8080'
VUE_APP_LOGIN='true'
.env.test
NODE_ENV="production"
BASE_URL="/testadmin"
VUE_APP_UPLOAD_URL='http://t.tt.com:8080'
VUE_APP_LOGIN='true'
【注意:】
测试环境可以理解为准生产环境。所以大体配置还是基本统一的。
配置其他环境变量以VUE_APP_开头。
b,打包文件配置
vue.config.js
文件中添加打包文件路径
baseUrl: process.env.BASE_URL,
const path = require('path')
const { config } = require('process')
const resolve = dir => {
return path.join(__dirname, dir)
}
// const BASE_URL = process.env.NODE_ENV === 'production'
// ? '/'
// : '/';
module.exports = {
baseUrl: process.env.BASE_URL,
outputDir: `dist`,
lintOnSave: false,
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('_c', resolve('src/components'))
},
productionSourceMap: false,
devServer: {
// proxy: 'http://1.1.1.1:8080',
// host: '1.1.1.1',
// port: '29003',
}
}
c,package.json文件中加入打包配置:
原有文件:
"scripts": {
"dev": "vue-cli-service serve --open",
"build-dev": "vue-cli-service build --mode development",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
修改后文件:
"scripts": {
"dev": "vue-cli-service serve --mode dev --open",
"build-dev": "vue-cli-service build --mode development",
"build-pro": "vue-cli-service build --mode prod",
"build-test": "vue-cli-service build --mode test",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
二,分环境项目功能差异化配置:
比如为方便开发,配置 :process.env.VUE_APP_LOGIN
src/router/index.js中:
import Vue from 'vue'
import Router from 'vue-router'
import routes from './routers'
import store from '@/store'
import iView from 'iview'
import { setToken, getToken, canTurnTo, setTitle } from '@/libs/util'
import { handleAuth } from '@/libs/auth'
import config from '@/config'
const { homeName } = config
Vue.use(Router)
const router = new Router({
routes,
mode: 'history',
base: 'testadmin'
})
const LOGIN_PAGE_NAME = 'login'
const turnTo = (to, access, next) => {
if (canTurnTo(to.name, access, routes)) next()
else next({ replace: true, name: 'error_401' })
}
const devIntercept = (to, from, next) => {
iView.LoadingBar.start();
next();
}
const proIntercept = (to, from, next) => {
iView.LoadingBar.start();
let code = to.query.code
handleAuth(code, () => {
if(to.name === LOGIN_PAGE_NAME){
next({
name: homeName
})
}else if(to.name === 'cache-switch'){
iView.LoadingBar.finish()
next(false)
}
else{
next();
}
})
}
const intercept = process.env.VUE_APP_LOGIN ==='false' ? devIntercept : proIntercept
router.beforeEach(intercept)
router.afterEach(to => {
setTitle(to, router.app)
iView.LoadingBar.finish()
window.scrollTo(0, 0)
})
export default router
三,打包配置测试比较
给输出文件作区分:
outputDir: dist-${process.env.NODE_ENV}
, // 不同环境输出不同打包目录
a,比较打包后的更新文件
在vue.config.js文件中加入时间戳:
关键代码:
const Timestamp = new Date().getTime();
config.plugin('extract-css').tap(args => [{
filename: `css/[name].[contenthash:8].${Timestamp}.css`,
chunkFilename: `css/[name].[contenthash:8].${Timestamp}.css`,
}]);
config.output.filename(`js/[name].[chunkHash:8].${Timestamp}.js`);
config.output.chunkFilename(`js/[name].[chunkHash:8].${Timestamp}.js`);
b,完整代码:
const Timestamp = new Date().getTime();
const path = require('path')
const { config } = require('process')
const resolve = dir => {
return path.join(__dirname, dir)
}
module.exports = {
baseUrl: process.env.BASE_URL,
outputDir: `dist`,
lintOnSave: false,
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('_c', resolve('src/components'))
config.plugin('extract-css').tap(args => [{
filename: `css/[name].[contenthash:8].${Timestamp}.css`,
chunkFilename: `css/[name].[contenthash:8].${Timestamp}.css`,
}]);
config.output.filename(`js/[name].[chunkHash:8].${Timestamp}.js`);
config.output.chunkFilename(`js/[name].[chunkHash:8].${Timestamp}.js`);
},
productionSourceMap: false,
devServer: {
// proxy: 'http://1.1.1.1:8080',
// host: '1.1.1.1',
// port: '29003',
}
}
这样webpack每次打包完成后就可以看到的不同的打包文件,便于查看文件更新。