Vuecli3.x單頁面應用程序文件配置及npm清除node_modules文件包

// 全局安裝
cnpm  install rimraf -g
// 刪除node_modules文件夾
rimraf node_modules

// 刪除成功

vuecli3.x單頁面應用vue.config.js文件基礎配置

const goods = require('./data/goods.json');
const path = require('path');


// Gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 壓縮文件後綴
const productionGzipExtensions = ['js', 'css', 'scss'];
// 是否爲開發環境
const isProduction = process.env.NODE_ENV === 'production';
// 自動刪除console,debugger,並且打包去掉map文件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {  // 自定義修改配置信息
    publicPath: isProduction ? "./" : "/",    // 根路徑
    outputDir: 'dist',   // 構建輸出目錄
    assetsDir: 'assets', // 靜態資源目錄(js,css,img,fonts)
    lintOnSave: false,   // 是否開啓eslint保存監測，有效值：true || false || 'error'
    chainWebpack: config => {   // api以及靜態資源路徑配置
        /* 請求數增多是因爲我們頁面預先渲染了其它組件，官方說明是一種 resource hint，用來告訴瀏覽器在頁面加載完成後，利用空閒時間提前獲取用戶未來可能會訪問的內容 */
        // 移除 prefetch 插件
        config.plugins.delete('prefetch')
        // 移除 preload 插件
        config.plugins.delete('preload');
        // 配置別名
        config.resolve.alias
            .set("@", resolve("src"))
            .set("img", resolve("src/assets/images"))
            .set("css", resolve("src/assets/styles/css"))
            .set('scss', resolve('src/static/scss'))
        // 限制資源文件大小
        // config.module
        //     .rule('images')
        //     .use('url-loader')
        //     .loader('url-loader')
        //     .tap(options => Object.assign(options, { limit: 10240 }))
    },
    // 默認在生成的靜態資源文件名中包含hash以控制緩存
    filenameHashing: true,
    css: {
        // css預編譯處理器配置項
        loaderOptions: {
            // 給 sass-loader 傳遞選項
            sass: {
                // @scss/ 是 src/static/scss 的別名
                // data: `@import "@scss/public.scss";`
            }
        },
        modules: false,
        sourceMap: isProduction ? false : true,    // 是否開啓css打包檢測
    },
    configureWebpack: config => {
        if (isProduction) {
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }))
            /*配置代碼壓縮 安裝 npm install uglifyjs-webpack-plugin 否則無UglifyJsPlugin對象*/
            config.plugins.push(
                //生產環境自動刪除console,debugger,並且打包去掉map文件
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            warnings: false,
                            drop_debugger: true,
                            drop_console: true,
                        },
                    },
                    sourceMap: false,
                    parallel: true,
                })
            )
        } else {
            // 開發環境
        }
    },
    devServer: {
        port: 7070,  // 端口號
        host: 'localhost',  // 本機ip地址或者使用localhost代替本地服務
        open: false, //配置自動啓動瀏覽器
        https: false,    // 是否開啓https協議
        hotOnly: false,  // 依賴模塊熱更新
        proxy: {      // 配置跨域
            '/api': {
                target: 'http://localhost:5000/api/', //跨域地址
                changeOrigin: true,
                ws: true,   // 是否跨域
                pathRewrite: {
                    '^/api': ''   //^是對跨域地址的封裝簡寫
                }
            }
        },
        before: app => {    // 在服務內部中間件之前，執行自定義中間件功能，比如加載json文件
            app.get('/api/goods', (req, res) => { // 接收兩個參數，文件路徑和回調函數
                res.json(goods);
            })
        }
    },
    // 第三方插件配置
    pluginOptions: {

    }
}