VUE项目打包配置 vue.config.js 文件

该文详细介绍了Vue项目中webpack的配置,包括区分生产环境与开发环境的URL,设置静态资源目录,禁用sourceMap以提升构建速度,以及使用代理解决跨域问题。此外,还提到了文件命名哈希和添加jQuery全局变量的配置方法。
摘要由CSDN通过智能技术生成
const webpack = require("webpack");
const Version = new Date().getTime();
module.exports = {
    /* 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath */
    /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
    // publicPath: process.env.NODE_ENV === "production" ? "/public/" : "./",
    publicPath: "./",/* 输出文件目录:在npm run build时,生成文件的目录名称 */
    outputDir: "dist",/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: "static",
    productionSourceMap: false,/* 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度 */
    filenameHashing: false,  /* 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) ,但是在我的项目里面没有起作用,为true时的hash值每次都是一样的*/
    lintOnSave: true, /* 代码保存时进行eslint检测 */
    /* webpack-dev-server 相关配置 */
    devServer: {
   	    open: true, /* 自动打开浏览器 */
        host: "0.0.0.0",/* 设置为0.0.0.0则所有的地址均能访问 */
        port: 8083,//端口号
        https: false,
        hotOnly: false,
        //配置代理
        proxy:{
        	'/api':{
        	    target:'',
        	    changOrigin:true,//允许跨域
        	    pathRewrite:{
        	    	'∧/report_center/api':'/api',//请求时,使用这个api就可以,此处需注意,这个箭头不对,我没找到苹果电脑对应的符号,正确的见底部的配图
                }
			}
        }
    },
    configureWebpack: {
        //引入jquery
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            })
        ],
        /*打包配置版本号*/
        output: {/*模块名称+时间戳*/
            filename: `[name].${Version}.js`,
            chunkFilename: `[name].${Version}.js`
        }
    }
};

在这里插入图片描述

缓存问题,我是直接在static后面直接加随机数了

 assetsDir: `static/${Version}`,
	后续如果有其他的,会陆续补充进去哈
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值