vue-cli 4.2.3中vue.config.js 配置常用參數(webpack)

截止到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'
            })
        ]
    },

}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章