截止到2020.3.19,vue-cli版本已经到了4.2.3,以下为常用的参数及介绍。

const path = require("path");

module.exports = {

    publicPath: process.env.NODE_ENV === 'production'
        ? './'//生产环境,路径为网站的子路径
        : '/',//开发环境下
    outputDir:'dist',//生产环境下的打包路径
    assetsDir:"aa",//生产环境下的静态资源css,js,img存放路径
    indexPath:"index.html",//生产环境下的index.html的路径,默认index.html
    filenameHashing:true,//生产环境下的打包文件的哈希后缀,默认true,哈希后缀是为了浏览器缓存
    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: 'Index Page',
            // 在这个页面中包含的块,默认情况下会包含
            // 提取出来的通用 chunk  vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时,
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话,就回退到 `public/index.html`
        // 输出文件名会被推导为 `subpage.html`
        subpage: 'src/main.js'
    },
    lintOnSave:true,//是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
    //浏览器报以下错时,设置runtimeCompiler: true
    //You are using the runtime-only build of Vue where the template compiler is not available.
    // Either pre-compile the templates into render functions, or use the compiler-included build.
    runtimeCompiler: true,//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是会打包资源增加 10kb 左右
    transpileDependencies:[],//通过babel显示转译依赖,可以在该列表列出来
    productionSourceMap:true,//生产环境下 会生成source map,用来在浏览器中F12 sources打断点,调试代码,默认是true,设置为false,可以加速生产打包过程,无法调试
    crossorigin:"",//设置生成的 HTML  <link rel="stylesheet">  <script> 标签的 crossorigin 属性,anonymous或者""(不需要用户凭证,允许跨域),use-credentials(需要用户凭证)
    //开启integrity<script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性
    // integrity:"sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC",
    css:{
        sourceMap:false,//默认是false
        loaderOptions:{}
    },
    //webpack 所有的选项都支持
    devServer:{
        host: '0.0.0.0',
        port: 8090,//端口
        open: true,//自动启动浏览器
        //服务代理
        proxy:{
            '/api': {
                target: 'http://www.baidu.com',
                ws: true,
                changeOrigin: true
            },
        }
    },
    //传递第三方插件
    pluginOptions:{
        jQuery: {
        }
    },

    // webpack配置 - 简单配置方式
    configureWebpack: {
        resolve: {
            alias: {
                // 别名
                "@api": path.resolve(__dirname, "./src/api"),
                "@utils": path.resolve(__dirname, "./src/utils"),
                "jQuery": "jquery"
            }
        },
        //插件
        plugins: [
            new webpack.ProvidePlugin({
                jQuery: 'jquery',
                $: 'jquery'
            })
        ]
    },

}

Logo

前往低代码交流专区

更多推荐