vue.config.js

創(chuàng)建項(xiàng)目

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue create my-project
# OR
vue ui

/**
 * *@2018-10-08
 * *@author trsoliu 
 * *@describe vue-cli 3.x配置文件
 */
const path = require('path');
const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移動(dòng)端模擬開發(fā)者工具 插件 （另：https://github.com/liriliri/eruda）
const CompressionPlugin = require('compression-webpack-plugin'); //Gzip
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器
const baseUrl = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss資源路徑 不同環(huán)境切換控制

module.exports = {
    //基本路徑
    //baseUrl: './',//vue-cli3.3以下版本使用
        publicPath:'./',//vue-cli3.3+新版本使用
    //輸出文件目錄
    outputDir: 'mcdonalds',
    // eslint-loader 是否在保存的時(shí)候檢查
    lintOnSave: true,
    //放置生成的靜態(tài)資源 (js坞生、css炼绘、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄读存。
    assetsDir: 'static',
    //以多頁模式構(gòu)建應(yīng)用程序。
    pages: undefined,
    //是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本
    runtimeCompiler: false,
    //是否為 Babel 或 TypeScript 使用 thread-loader医舆。該選項(xiàng)在系統(tǒng)的 CPU 有多于一個(gè)內(nèi)核時(shí)自動(dòng)啟用炕柔，僅作用于生產(chǎn)構(gòu)建，在適當(dāng)?shù)臅r(shí)候開啟幾個(gè)子進(jìn)程去并發(fā)的執(zhí)行壓縮
    parallel: require('os').cpus().length > 1,
    //生產(chǎn)環(huán)境是否生成 sourceMap 文件购撼，一般情況不建議打開
    productionSourceMap: false,
    // webpack配置
    //對(duì)內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: config => {
        /**
         * 刪除懶加載模塊的prefetch跪削，降低帶寬壓力
         * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
         * 而且預(yù)渲染時(shí)生成的prefetch標(biāo)簽是modern版本的，低版本瀏覽器是不需要的
         */
        //config.plugins.delete('prefetch');
        //if(process.env.NODE_ENV === 'production') { // 為生產(chǎn)環(huán)境修改配置...process.env.NODE_ENV !== 'development'
        //} else {// 為開發(fā)環(huán)境修改配置...
        //}
    },
    //調(diào)整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
    configureWebpack: config => {
        //生產(chǎn)and測試環(huán)境
        let pluginsPro = [
            new CompressionPlugin({ //文件開啟Gzip迂求，也可以通過服務(wù)端(如：nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$', ),
                threshold: 8192,
                minRatio: 0.8,
            }),
            //  Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
            new BundleAnalyzerPlugin(),
        ];
        //開發(fā)環(huán)境
        let pluginsDev = [
            //移動(dòng)端模擬開發(fā)者工具(https://github.com/diamont1001/vconsole-webpack-plugin  https://github.com/Tencent/vConsole)
            new vConsolePlugin({
                filter: [], // 需要過濾的入口文件
                enable: true // 發(fā)布代碼前記得改回 false
            }),
        ];
        if(process.env.NODE_ENV === 'production') { // 為生產(chǎn)環(huán)境修改配置...process.env.NODE_ENV !== 'development'
            config.plugins = [...config.plugins, ...pluginsPro];
        } else {
            // 為開發(fā)環(huán)境修改配置...
            config.plugins = [...config.plugins, ...pluginsDev];
        }
    },
    css: {
        // 啟用 CSS modules
        modules: false,
        // 是否使用css分離插件
        extract: true,
        // 開啟 CSS source maps碾盐，一般不建議開啟
        sourceMap: false,
        // css預(yù)設(shè)器配置項(xiàng)
        loaderOptions: {
            sass: {
                //設(shè)置css中引用文件的路徑，引入通用使用的scss文件（如包含的@mixin）
                data: `
                $baseUrl: "/";
                @import '@/assets/scss/_common.scss';
                `
                                //data: `
                                //$baseUrl: "/";
                                //`
            }
        }
    },
    // webpack-dev-server 相關(guān)配置 https://webpack.js.org/configuration/dev-server/
    devServer: {
        // host: 'localhost',
        host: "0.0.0.0",
        port: 8000, // 端口號(hào)
        https: false, // https:{type:Boolean}
        open: true, //配置自動(dòng)啟動(dòng)瀏覽器  http://172.16.1.12:7071/rest/mcdPhoneBar/ 
        hotOnly: true, // 熱更新
        // proxy: 'http://localhost:8000'   // 配置跨域處理,只有一個(gè)代理
        proxy: { //配置自動(dòng)啟動(dòng)瀏覽器
            "/rest/*": {
                target: "http://172.16.1.12:7071",
                changeOrigin: true,
                // ws: true,//websocket支持
                secure: false
            },
            "/pbsevice/*": {
                target: "http://172.16.1.12:2018",
                changeOrigin: true,
                //ws: true,//websocket支持
                secure: false
            },
        }
    },

    // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
    pluginOptions: {
        'style-resources-loader': {//https://github.com/yenshih/style-resources-loader
            preProcessor: 'scss',//聲明類型
            'patterns': [
                                //path.resolve(__dirname, './src/assets/scss/_common.scss'), 
            ],
                        //injector: 'append'
        }
    }
};