vue-cli3打包

记录一下第一次VUE项目的打包过程。
首先该项目使用的是vue-cli3，在打包之前需要进行一些配置。

第一步：新建文件
需要在package.json同层级(即最外层)新建一个文件，文件名固定为：vue.config.js

第二步：配置文件

const path = require('path')
const debug = process.env.NODE_ENV !== 'production'

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 根域上下文目录
    outputDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
    lintOnSave: false, // 是否开启eslint保存检测，有效值：ture | false | error
    runtimeCompiler: true, // 运行时版本是否需要编译
    transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
    productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
    configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
        if (debug) { // 开发环境配置
            config.devtool = 'cheap-module-eval-source-map'
        } else { // 生产环境配置
        }
    },
    devServer: {
        open: true, //自动启动浏览器
        host: '0.0.0.0',
        port: 8081,
        https: false,
        hotOnly: false, //webpack已经默认开启，这里false
        proxy: { // 配置跨域
            '/api': {
                target: 'http://127.0.0.1:8080/renewal',  //打包后接口地址
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => {}
    }
}

这个配置只是这次用到的一些，还有很多其它可配置项。需要的可百度，有很多文章介绍。

第三步：打包
在终端先cd xxx进入项目，
然后输入npm run build 回车运行，编译打包即可。
打包后可以看到项目目录多了一个dist文件夹，这个dist文件夹存放的代码即是最终发布版本。

打包后生成的dist文件夹