Vuecli3.x单页面应用程序文件配置及npm清除node_modules文件包

// 全局安装
cnpm  install rimraf -g
// 删除node_modules文件夹
rimraf node_modules

// 删除成功

或者不安装也可以
rm -rf 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: {

    }
}