vue分环境配置变量及打包

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每次打包完成后就可以看到的不同的打包文件，便于查看文件更新。