學習 .babel.config.js 配置 vue.config.js配置


1.最近項目上線,誤刪一些文件配置,抽空看一下這些配置的功能

學習地址:https://www.jianshu.com/p/b358a91bdf2d

vue.config.js 是一個可選的配置文件,根目錄中存在這個文件,那么它會被 @vue/cli-service 自動加載。

publicPath :這個值也可以被設置為空字符串 ('') 或是相對路徑 ('./'),這樣所有的資源都會被鏈接為相對路徑,這樣打出來的包可以被部署在任意路徑。

如果生產環境需要前段協助配置路徑:

 

 outputDir:項目打包之后,輸出文件文件名。注意目標目錄在構建之前會被清除 ,再次打包前個dist目錄會被覆蓋。

 

 assetsDir:放置生成的靜態資源 (js、css、img、fonts) 的目錄。總目錄名字叫:static,里面包含子目錄,css,img,js三個文件夾。

 

indexPath:指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑,也可以將打包的index.html文件文字改成school,html

總結:打包時,既可以改變css,js,img總體的外層文件名稱,也可以改變html的文件名稱。

 

 pages:其值應該是一個對象,對象的 key 是入口的名字,value 是:

 

 

 lintOnSave:是否在保存的時候使用 `eslint-loader` 進行檢查。有效的值:`ture` | `false` | `"error"`  當設置為 `"error"` 時,檢查出的錯誤會觸發編譯失敗。

 

 productionSourceMap:如果你不需要生產環境的 source map,可以將其設置為 false 以加速生產環境構建。

Css相關配置:

 

 devServer:host、port 和 https 可以被命令行參數覆寫

 

 簡單版本:module.exports = {
// publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',

//基本路徑
publicPath: './',//默認的'/'是絕對路徑,如果不確定在根路徑,改成相對路徑'./'
// 輸出文件目錄
outputDir: 'dist',
assetsDir:'static',
indexPath:'index.html',
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
// 生產環境是否生成 sourceMap 文件
productionSourceMap: false,
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?

   sourceMap: false,
},
// webpack-dev-server 相關配置
devServer: {
    open: false,//open 在devServer啟動且第一次構建完成時,自動用我們的系統的默認瀏覽器去打開要開發的網頁
    host: '0.0.0.0',//默認是 localhost。如果你希望服務器外部可訪問,指定如下 host: '0.0.0.0',設置之后之后可以訪問ip地址
    port: 8080,
    hot:true,//hot配置是否啟用模塊的熱替換功能,devServer的默認行為是在發現源代碼被變更后,通過自動刷新整個頁面來做到事實預覽,開啟hot后,將在不刷新整個頁面的情況下通過新模塊替換老模塊來做到實時預覽。
    https: false,
    hotOnly: false,// hot 和 hotOnly 的區別是在某些模塊不支持熱更新的情況下,前者會自動刷新頁面,后者不會刷新頁面,而是在控制台輸出熱更新失敗

  proxy: {
    '/': {
       target: 'http://xxxx:8080', //目標接口域名
       secure: false, //false為http訪問,true為https訪問
        changeOrigin: true, //是否跨域
       pathRewrite: {
       '^/': '/' //重寫接口
   }
}
}, // 設置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}

 

 第二部分:.babel.config.js 配置

第一種方式是json 格式:只需要在webpack.json文件夾里面配置加入一段代碼就行了

//package.json {

     "dependencies": {     },

     "babel": { "presets": ["@babel/preset-env"] }

  }

第二種方式是js文件:去這個網址看好了

https://juejin.cn/post/6850037262441250829#heading-12


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM