vue-cli 3.x 项目打包配置-vue.config.js

前言

昨天帮别人填坑，接了一个vue-cli 3.x 创建的history模式的项目，打包给后端部署，一直出问题，现在就记录一下history模式的坑。

npm run build配置-package.json

"scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "start": "node index.js",
    "server": "nodemon index.js --ignore client",
    "lint": "vue-cli-service lint"
  },

可以看到 “build”: “vue-cli-service build --mode prod”,可以通过传递 --mode 选项参数为命令行覆写默认的模式。一般我们分为开发模式（dev），生产模式（production）和测试模式（test），我们可以打一个测试的包和一个正式的包，在不同的模式下定义不同的环境变量。

关于模式和环境变量的详解，可以去看官网的文档：模式和环境变量

我在项目的根目录下添加这两个文件，来指定环境变量

.env.dev文件

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '/ee'
VUE_APP_BIGDATAURL = '/bb'

.env.prod文件

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '正式环境的ip地址，http://xxxxx'
VUE_APP_BIGDATAURL = '正式环境的ip地址，http://xxxxx'

主要是在axios的封装，用到了这些环境变量。（ps:因为这个项目调用了两个后端接口，所以用接口名开头区分调用哪个baseURL）。

const egUrl = process.env.VUE_APP_BASEURL;
const bigUrl = process.env.VUE_APP_BIGDATAURL;
export default function $axios(options) {
	return new Promise((resolve, reject) => {
		const instance = axios.create({
			headers: {},
			baseURL: new RegExp("^bb").test(options.url)?bigUrl:egUrl,
			transformResponse: [function (data) { }]
		}
		)

vue配置文件-vue.config.js

// vue.config.js
const path = require('path')
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/',
  outputDir: 'dists',// 输出文件目录
  assetsDir: "./static",//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  indexPath: './index.html',//指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
  lintOnSave: true,
  transpileDependencies: [], 
  productionSourceMap: false, 
  // 选项...
  devServer: {
    open: true,      // 运行项目时，是否自动开启新窗口。
    host: 'localhost',  
    port: 8080,  // 默认端口号。
    https: false,      // 如果开启就会以https开头。
    hotOnly: false,      //安装模块更好的兼容，不需要配置。
    proxy: {
      '/ee': {
        target: 'http://localhost:7002/',
        changeOrigin: true,
        pathRewrite: {
          '^/ee': ''
        }
      },
      '/bb': {
        target: 'http://localhost:8888/',
        changeOrigin: true,
        pathRewrite: {
          '^/bb': ''
        }
      }
    }
  },
  //定制主题
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          'hack': `true; @import "${path.join(__dirname,'./src/assets/style/vant-ui/variables.less')}";`
        }
      }
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views',
      }
    }
  },
}

好了，到这了，也配置完了。可以开始打包了，运行npm run build，咦没问题，好像成功了？
不要高兴的太早了，本地打开dists里的index.html文件，404？找不到相关资源文件？哦豁，出了什么问题呢？

配置是没有问题了，问题在于项目用的history模式的路由啊，这个一般用于后端渲染。用这个是比较美观好看，但是它需要后端配合啊，需要改一些东西了。鉴于我是后端不在，我也试了网上的说法，在router.js加上base配置，还是以失败告终。

//失败样例
const router = new VueRouter({
  mode: 'history',
  base: './',
  routes
})

怎么办呢？一直改都是404，渲染不了对应路由的页面。
我的解决办法就是，改成hash模式这样开发和打包之后都能用，虽然多了个#号，但是它用着香啊。

路由改成hash模式-router.js

const router = new VueRouter({
  mode: 'hash',
  routes
})

运行npm run build ，打包完，打开dists