module.exports = {
baseUrl: "./", //1.默認為 "/":部署在一個域名的根路徑上 ; 2. "./":所有的資源都會被鏈接為相對路徑,這樣打出來的包可以被部署在任意路徑
outputDir: "dist", //默認為 "dist",指打包后的資源放置的路徑,放在dist文件夾下
assetsDir: "static", //默認為:'' ,放置打包后生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。
indexPath: "index.html", //Default: 'index.html' ,指定生成的 index.html 的輸出路徑 (相對於 outputDir)
filenameHashing: true, //Default: true ,生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存
// pages:undefined,//在 multi-page 模式下構建應用
lintOnSave: true, //Type: boolean|'error';Default: true; true:將 lint 錯誤輸出為編譯警告;'error':錯誤輸出會導致編譯失敗
runtimeCompiler: false, //Default: false, 設置為 true 后你就可以在 Vue 組件中使用 template 選項了,但是這會讓你的應用額外增加 10kb 左右
// transpileDependencies:[],//Default: [], 默認情況下 babel-loader 會忽略所有 node_modules 中的文件
productionSourceMap: false, //Default: true, 如果你不需要生產環境的 source map,可以將其設置為 false 以加速生產環境構建。
// crossorigin: undefined, //Default: undefined, 設置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標簽的 crossorigin 屬性。
// integrity: false, //Default: false,在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標簽上啟用 Subresource Integrity
configureWebpack:{
devServer:{
before(app){//相當於搭建了一個小型的服務器
app.get("/api/getUsers",function (req,res) {
res.json({
code:"S",
data:[{id:1,name:"bob",age:23},{id:2,name:"jack",age:24}]
})
})
app.post("/api/setUsers",function (req,res) {
res.json({
code:200,
msg:"修改成功"
})
})
}
}
},//Type: Object | Function ;修改最終的配置,可以模擬服務器接口
// chainWebpack:function(){},//允許對內部的 webpack 配置進行更細粒度的修改。
css: {
modules: false, //Default: false, 設置為 true 后你就可以去掉文件名中的 .module 並將所有的 *.(css|scss|sass|less|styl(us)?) 文件視為 CSS Modules 模塊。
sourceMap: false //Default: false, 是否為 CSS 開啟 source map。設置為 true 之后可能會影響構建的性能。
// extract: false, //Default: 生產環境下是 true,開發環境下是 false.是否將組件中的 CSS 提取至一個獨立的 CSS 文件中
// loaderOptions: {} //Default: {}, 向 CSS 相關的 loader 傳遞選項
},
devServer: {
overlay:{ //去除eslint報警告
warning:false,
error:true
},
open: true,
host: 'localhost',
port: 8080,
https: false,
//以上的ip和端口是我們本機的;下面為需要跨域的
proxy: {//配置跨域
'/api': {
target: 'http://api.xxx.com/api/',//這里后台的地址模擬的;應該填寫你們真實的后台接口
ws: true,
changOrigin: true,//允許跨域
pathRewrite: {
'^/api': ''//請求的時候使用這個api就可以,/api表示http://api.xxx.com/api/
}
}
}
},
//請求的接口代理到localhost:8080,注意要和項目運行地址一致。請求地址變為 /api/xxx/xxx
devServer: {
host: "127.0.0.1",
port: 8080,
// proxy: "http://api.test.com" //可以是一個指向開發環境 API 服務器的字符串.如果你的前端應用和后端 API 服務器沒有運行在同一個主機上,你需要在開發環境下將 API 請求代理到 API 服務器。
//proxy: {
// '/api': {
// target: 'http://api.test.com',
// ws: true,
// changeOrigin: true
// },
// '/foo': {
// target: 'http://xxx.test.com'
// }
// }//也可以是一個對象,參照:https://github.com/chimurai/http-proxy-middleware#proxycontext-config
} //所有 webpack-dev-server 的選項都支持。注意:有些值像 host、port 和 https 可能會被命令行參數覆寫。有些值像 publicPath 和 historyApiFallback 不應該被修改,因為它們需要和開發服務器的 baseUrl 同步以保障正常的工作
// parallel: require("os").cpus().length > 1, //Default: require('os').cpus().length > 1, 是否為 Babel 或 TypeScript 使用 thread-loader
// pwa:{},//向 PWA 插件傳遞選項
// pluginOptions: {},//可以用來傳遞任何第三方插件選項
};
常用配置
baseUrl: "./", //防止打包后,文件找不到
assetsDir: "static",//把打包文件放到static文件夾內
productionSourceMap: false,//加速生產環境構建,減小打包后包體積
devServer:{proxy:'http://api.test.com'} //根據個人需要配置該項
vue.config.js常用配置示例
module.exports = {
//根據屏幕大小自動縮放適配
css: {
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
plugins: [require('postcss-px2rem')({
remUnit: 192, //屏幕適配
})]
}
}
},
lintOnSave:false, //取消eslint檢測
productionSourceMap: false, //設為false可減小打包后包體積,默認為true
publicPath: '/cm/', //配置域名根路徑,從localhost/#/配置后成localhost/cm#/,注意路由應使用hash
devServer: {
overlay:{
warning:false,
error:true
},
host: '0.0.0.0',
port: 8060,
// open: true, //自動打開瀏覽器
},
assetsDir: "static" //設置打包后靜態資源放在static文件夾里
}
引自: https://blog.csdn.net/bamboozjy/article/details/84937495
官網參考: https://cli.vuejs.org/zh/config/#baseurl