vue.config,js配置简述

通过vue-cli 3.0 工具生成的项目,默认隐藏了所有webpack的配置项,目的是为了屏蔽项目配置过程,让程序员把工作重心,放在具体的功能和业务逻辑上。

我们可以通过vue.config.js文件修改webpack的默认配置。

官方配置

//vue.config.js配置

const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
//导出一个对象
module.exports = {
    //配置选项  
    //部署应用包的基本URL
    publicPath: "./"
    //构建输出生产环境项目项目 默认(dist)
    outputDir:"dist"
    assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
    indexPath:"index.html",//相对于(outputDir)。指定生成的index的输出目录。./dist/index.html
    filenameHashing:'true'//静态文件中是否使用默认值
    pages:{} //配置多页面应用,默认为undefind
	lintOnSave:false //是否保存的时候使用,eslint-loader 进项检测
    runtimeCompiler:true //是否使用带浏览器内编译器的完整构建版本  // 运行时版本是否需要编译
	transpileDependencies:[] //编译node_module中的文件,通过babel-loader
    productionSourceMap:false //是否需要生产环境资源地图
	crossorigin:"" //是否需要添加crossorigin属性
	integrity:false // 是否启用SRI
  configureWebpack: config => { // webpack配置,值位对象时会合并配置,为方法时会改写配置
        if (debug) { // 开发环境配置
            config.devtool = 'cheap-module-eval-source-map'
        } else { // 生产环境配置
        }
        // Object.assign(config, { // 开发生产共同配置
        //     resolve: {
        //         alias: {
        //             '@': path.resolve(__dirname, './src'),
        //             '@c': path.resolve(__dirname, './src/components'),
        //             'vue$': 'vue/dist/vue.esm.js'
        //         }
        //     }
        // })
    },
    chainWebpack: config => { // webpack链接API,用于生成和修改webapck配置,https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
        if (debug) {
            // 本地开发配置
        } else {
            // 生产开发配置
        }
    },
    parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
    pluginOptions: { // 第三方插件配置
    },
    pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    },
    devServer: {
        open: true,
        host: 'localhost',	
        port: 8081,
        https: false,
        hotOnly: false,
        proxy: { // 配置跨域
            '/api': {
                target: 'http://localhost:5002/api/',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => { }
    }
	
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值