Vue-cli 3.0 打包配置

关于Vue-cli3.0打包官网上也没有给出什么具体的例子，下面是个人根据项目打包运行成功之后的一些记录：

vue-cli 3.0创立的项目所有的配置都在vue-config.js中完成，下面是我自己的配置：

const path = require('path')

const resolve = dir => {
  return path.join(__dirname, dir)
}

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
  // 输出文件目录
  outputDir: 'current',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'static',
  devServer: {
    port: 8090, // 端口号
    host: 'localhost',
    https: false, // https:{type:Boolean}
    open: true, // 配置自动启动浏览器
  },
  // 生产环境是否生成 sourceMap 文件，一般情况不建议打开
  productionSourceMap: false,

  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
  },

}

其中需要注意的地方有以下几点：

baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',

线上环境将baseurl设为 ./
outputDir: 'current',

这个看个人的想法，默认打包形成的目录为dist,想改的话就改一下
assetsDir: 'static',

这个配置是存放打包生成的静态资源的
productionSourceMap: false,

这个表示生产环境是否生成 sourceMap 文件，最好配置上

还有一个很重要的地方，就是在打包的时候，最好将路由的配置改一下，将 mode属性改为默认的，不要使用history模式：

const router = new Router({
  routes,
  // mode: 'history', // default: hash ,history 这样设置后，就可以去掉url中丑丑的“#”啦
})

默认就可以了，否则打包运行之后路由的跳转会出问题的

之后，将tomcat的Context直接指向你的current目录，启动Tomcat就可以了：

<Context path="/" docBase="D:\git\personal\vue\vue-backend-manage\current" debug="0" reloadable="false">
    <Resources cachingAllowed="false" cacheMaxSize="1000" />
</Context>

在这里插入图片描述

这样，一个完整的打包启动流程就走完了…

Vue-cli 3.0 打包配置

猜你喜欢