vue-cli搭建的项目配置vue.config.js

最新推荐文章于 2023-01-12 14:22:43 发布

weixin_30237281

最新推荐文章于 2023-01-12 14:22:43 发布

阅读量130

点赞数

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/chao202426/p/11313393.html

版权

实际工作中，发现每次发布都要清缓存，不然新改的东西就没有办法生效，于是就想到在打包文件名后面添加版本号，于是经过了一番百度之后，找到了办法

1、先定义一个时间戳，

const Version = new Date().getTime();

2、在打包配置中加上时间戳

module.exports = {
    configureWebpack: {/*打包配置版本号*/
        output: {/*模块名称+时间戳*/
            filename: `[name].${Version}.js`,
            chunkFilename: `[name].${Version}.js`
        }
    }
};

这个是我们自己目前在做的项目的配置，用vue-cli3.0搭建的，然后最外层添加vue.config.js配置文件，里面的配置可以覆盖默认配置，下面附上完整代码，以便后面开发方便使用

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: "assets",
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: true,
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: "0.0.0.0",
        port: 8083,
        https: false,
        hotOnly: false
    },
    configureWebpack: {
        //引入jquery
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            })
        ],
        /*打包配置版本号*/
        output: {/*模块名称+时间戳*/
            filename: `[name].${Version}.js`,
            chunkFilename: `[name].${Version}.js`
        }
    }
};