vuecli4+,vue.config.js配置(含部署子目录配置)

如果要部署到二级目录,将项目内部引用的css、img修改为相对路径

const path = require("path");
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//引入该插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
//匹配此 {RegExp} 的资源
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i

module.exports = {
    configureWebpack: config => {
        let myPlugins = [
            new webpack.ProvidePlugin({

            })
        ];
        if (process.env.NODE_ENV === "production") {
            // 生产环境配置...
            const plugins = []
            plugins.push(
                // gzip压缩配置
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',   //目标资源名称
                    algorithm: 'gzip',
                    test: productionGzipExtensions, //处理所有匹配此 {RegExp} 的资源
                    threshold: 10240,   //只处理比这个值大的资源。按字节计算(设置10K以上进行压缩)
                    minRatio: 0.8   //只有压缩率比这个值小的资源才会被处理
                }),
                //代码压缩配置
                new UglifyJsPlugin({
                    uglifyOptions: {
                        warnings: false,
                        // 删除注释
                        output:{
                            comments:false
                        },
                        // 删除console debugger 删除警告
                        compress: {
                            drop_console: true, //console
                            drop_debugger: true,
                            pure_funcs: ['console.log','console.debug']//移除console
                        }
                    }
                })
            )
            // End 生成 gzip 压缩文件
            config.plugins = [...config.plugins, ...plugins]
        } else {
            // 开发环境配置
        }
        //添加插件
        config.plugins.push(...myPlugins)
        //指定babel-polyfill 入口 IE11报语法错误bug修复
        config.entry.app = ["babel-polyfill", "./src/main.js"];
    },

    //指定IE下报错的路径,在vue.config.js中配置transpileDependencies。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill
    //transpileDependencies: ['node_modules/*'],
    transpileDependencies: [
        '_pdfjs-dist@2.7.570@pdfjs-dist',
        '_jspdf@2.3.1@jspdf'
    ],
    // 基本路径
    publicPath: process.env.NODE_ENV === 'production'? './': '/',
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // use the full build with in-browser compiler?
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    runtimeCompiler: false,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: config => {
        // 优化moment 去掉国际化内容
        config.plugin('ignore')
            // 忽略/moment/locale下的所有语言文件
            .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
    },
    // vue-loader 配置项
    // https://vue-loader.vuejs.org/en/options.html
    //vueLoader: {},
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: false,
        // 开启 CSS source maps?
        sourceMap: false,
        //安装css-loader 后导致样式失效,增加下面配置
        //esModule: false,
        // css预设器配置项
        loaderOptions: {
            sass: {
                //scss 全局变量引用
                //sass-loader v8-,这个选项名是 "data"
                // sass-loader v8 中,这个选项名是 "prependData"
                // sass-loader v10+,这个选项名是 "additionalData"
                additionalData: `
                    @import "node_modules/compass-mixins/lib/compass/css3";
                    @import "node_modules/compass-mixins/lib/compass/utilities";
                    @import "./src/assets/scss/globalVariable";
                `
            }
        },

        // 启用 CSS modules for all css / pre-processor files.
        modules: false
        //requireModuleExtension: true
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // 是否启用dll
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
    //dll: false,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        //host: 'localhost',
        disableHostCheck: true,
        port: 8000,
        https: false,
        hotOnly: false,
        //proxy: null, // 设置代理
        before: app => {}
    },
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时,
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: '山西交控集团公招系统',
            // 在这个页面中包含的块,默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        }
    },
    // 第三方插件配置
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'scss',
            patterns: [
                //加上自己的文件路径,不能使用别名
                path.resolve(__dirname, 'src/assets/globalVariable'),
                path.resolve(__dirname, 'node_modules/compass-mixins/lib'),
                path.resolve(__dirname, 'src/assets/base'),
            ]
        }
    }
}




router/index.js:

......
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL, //  NODE_ENV 改为 BASE_URL,
  routes
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容