vue脚手架基本配置

vue.config.js

const webpack = require("webpack")

module.exports = {
    baseUrl: "/",
    outputDir: "dist",
    // 打包之后静态资源保存的目录
    assetsDir: "assets",
    // 配置多页引用的入口
    pages: {
        index: "src/main.js",
        child: {
            entry: "src/child/main.js",
            template: "public/index.html",
            filename: "child.html"
        }
    },
    // 是否使用eslint
    lintOnSave: false,
    // 是否使用运行时编译器，参见：https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    runtimeCompiler: false,
    // 需要babel编译的node_modules文件(默认babel不作用于node_modules)
    transpileDependencies: [],
    // 是否对js启用sourcemap
    productionSourceMap: true,
    // webpack配置(Object/Function)
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                'process.env': process.env.NODE_ENV
            })
        ]
    },
    // 提供一个方法修改webpack的配置，包括entry、rules、plugins等，参见：https://github.com/mozilla-neutrino/webpack-chain
    chainWebpack: config => {
        // 新增一个入口
        config.entry("chain")
            .add("./src/chain/main.js")
            .end();
    },
    css: {
        // 是否对没有.module的文件(*.[ext])使用CSSModules，默认文件类型为*.module.[ext]
        modules: false,
        // 是否将vue组件的<style>单独提出到一个css文件中 
        extract: true,
        // 是否对css启用sourcemap
        sourceMap: false,
        // 对相应的loader进行配置
        loaderOptions: {
            css: {},
            less: {},
            sass: {},
            postcss: {}
        }
    },
    // 配置webpack-dev-server，参见：https://webpack.js.org/configuration/dev-server/
    devServer: {
        port: 8082, // 端口
        open: true, // 是否自动打开浏览器
        proxy: 'http://localhost:4000' // 设置代理
    },
    // 是否使用thread-loader对babel或ts进行转换
    parallel: require('os').cpus().length > 1,
    // pwa配置，参见：https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {
        name: 'PWA App',
        themeColor: '#4DBA87',
        msTileColor: '#000000'
    },
    // 插件中可以调用的选项，可以是第三方插件，例：options.pluginOptions.MyOpts
    pluginOptions: {
        MyOpts: {
            // ...
        }
    }
}