vue-cli3的vue.config.js配置信息

之前所有的配置文件都在vue create 搭建時preset預設好的，后期可以通過vue config 命令來審查或修改全局的 CLI 配置 或 在vue.config.js 中配置。

更多配置詳情參見官網：https://cli.vuejs.org/zh/config/

 

vue.config.js 是一個可選的配置文件，如果項目的(和package.json同級的)根目錄中存在這個文件，那么它會被@vue/cli-service自動加載。你也可以使用 package.json中的vue字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。

vue.config.js這個文件應該導出一個包含了選項的對象：

module.exports = {

  // 選項...

}

 

 

配置代碼如下

在vue根目錄下創建vue.config.js文件

 

module.exports = {
    publicPath: '/',    //部署應用時的根路徑(默認'/'),也可用相對路徑(存在使用限制)
    outputDir: 'dist',        //運行時生成的生產環境構建文件的目錄(默認'dist'，構建之前會被清除)
    assetsDir: '',        //靜態資源目錄(js、css、img、fonts)，相對outputDir的目錄(默認'')
indexPath: 'index.html', //指定生成index.html的輸出路徑(相對outputDir)也可以是絕對路徑
lintOnSave: true,                //是否開啟ESlint（保存時檢查）
    productionSourceMap: true,    //生產環境是否生成 sourceMap 文件
    pages: {    //pages里配置的路徑和文件名在你的文檔目錄必須存在，否則啟動服務會報錯
        index: {//除了 entry 之外都是可選的
            entry: 'src/index/main.js',        //page的主入口
            template: 'public/index.html',    //模板來源
            filename: 'index.html',            //在 dist/index.html 的輸出
//title在template中使用：<title><%=htmlWebpackPlugin.options.title%></title>
            title: '生成的配置信息',        
            chunks: ['chunk-vendors', 'chunk-common', 'index'] 
// 在這個頁面中包含的塊，默認情況下會包含,提取出來的通用 chunk 和 vendor chunk
        },
        subpage: 'src/subpage/main.js'
//官方解釋：當使用只有入口的字符串格式時，模板會被推導為public/subpage.html
//若找不到就回退到public/index.html，輸出文件名會被推導為subpage.html
    },
    css: {
        extract: true,        //是否使用css分離插件 ExtractTextPlugin
        sourceMap: false,    //開啟 CSS source maps
        loaderOptions:{}, //css預設器配置項
        modules: false        //啟用CSS modules for all css / pre-processor files.
    },
    devServer: {    //環境配置
        host: 'localhost',
        port: 8080,
        https: false,      //是否開啟https
        hotOnly: false, //是否配置熱更新
        open: true,      //配置自動啟動瀏覽器
        proxy: {        //配置多個代理跨域(配置一個 proxy: 'http://localhost:4000' )
            '/api': {
                target: 'http://127.0.0.1:3000',
                ws: true,  //是否跨域
                changeOrigin: true,
            pathRewrite: { '^/api':'' }
            }
        }
    },
    pluginOptions: {// 第三方插件配置
        // ...
    }
};