λ‘컬μμ μ€νμν¬ λ κ°νΉ μ λμκ° λκ° μμλ€. (400λ²λ μλ¬)
κ·Έλ΄ λλ§λ€ νμ μμ²νλ urlλ‘ μ λ μκ°κ³ μλμ§, ν΄λΌμ΄μΈνΈμ μλ² μ¬μ΄μ μ°κ²°μ΄ μ μ€μ λμ΄μλμ§ νμΈν΄μΌνλ€.
vue.config.jsλ Webpack μ€μ μ νμ₯νκ±°λ μ¬μ©μ μ μνλ λ° μ¬μ©λλ κ΅¬μ± νμΌμ΄λ€.
π vue.config.jsκ° νμν κ²½μ°
- κΈ°λ³Έ μ€μ μ λμ΄ νλ‘μ νΈμ νΉμ μꡬμ¬νμ΄ μμ λ
- κ°λ° μλ² μ€μ μ λ³κ²½νκ±°λ webpack νλ¬κ·ΈμΈμ μΆκ°ν λ
- API νλ‘μλ₯Ό μ€μ νκ±°λ μΈλΆ CSS/JS λΌμ΄λΈλ¬λ¦¬λ₯Ό μΆκ°ν λ
μμ κ°μ΄ ν΄λΉ νμΌμ ν΅ν΄ κΈ°λ³Έμ μΈ μ€μ μ λ³κ²½νκ±°λ μλ‘μ΄ κΈ°λ₯μ μΆκ°ν μ μλ€.
μ΄ νμΌμμ μ€μ ν μ μλ μ΅μ λ€μ λ€μκ³Ό κ°λ€.
πΉ μ£Όμ μ€μ μ΅μ λ€
- publicPath
- μ±μ΄ λ°°ν¬λ κΈ°λ³Έ URL κ²½λ‘ μ§μ π ν΄λΉ κ²½λ‘λ‘ νΈμ€ν λ¨
module.exports = {
publicPath: '/my-app/'
};
- outputDir
- λΉλλ νμΌμ΄ μ μ₯λ λλ ν 리 μ€μ
module.exports = {
outputDir: 'dist'
};
- assetsDir
- static resourceκ° μ μ₯λ λλ ν 리 μ€μ
module.exports = {
assetsDir: 'static'
};
- devServer
- κ°λ° μλ² μ€μ μ μ
module.exports = {
devServer: {
port: 8080, // κ°λ° μλ² ν¬νΈ
proxy: 'http://backend.example.com' // API νλ‘μ μ€μ
}
};
- lintOnSave
- κ°λ° μ€ lint μ€λ₯ μ²λ¦¬ λ°©λ² μ€μ
module.exports = {
lintOnSave: false // ESLint μ€λ₯ 무μ
};
- configureWebpack
- Webpack μ€μ μΆκ° νΉμ μμ
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
};
- productionSourceMap
- λ°°ν¬ μ μμ€ λ§΅ μμ± μ¬λΆ κ²°μ
module.exports = {
productionSourceMap: false
};
κ°λ° μλ² κ΅¬μ± λ° νλ‘μ μ€μ
devServer: {
host: 'localhost',
port: 8081,
proxy: {
'^/sys': {
target: 'http://localhost:9320',
changeOrigin: true,
logLevel: 'debug',
},
'ws://localhost:8080/*': {
// WebSocket νλ‘μ μ€μ
target: 'ws://localhost:8080',
ws: true, // WebSocket νλ‘μ νμ±ν
},
'^/abcapi': {
//target: 'https://dev-api.abc.com',
target: 'http://localhost:8989',
pathRewrite: { '^/abcapi': '/' },
changeOrigin: true,
logLevel: 'debug',
},
'^/fileapi': {
target: 'https://dev-file.abc.com',
pathRewrite: { '^/fileapi': '/' },
changeOrigin: true,
logLevel: 'debug',
},
},
},
- proxy κ°μ²΄ : νΉμ μ νμ HTTP μμ²μ λ€λ₯Έ λ°±μλ μλ²λ‘ 리λ€μ΄λ νΈ π CORS λ¬Έμ μ²λ¦¬
- `/sys`, `/abcapi`, `/fileapi` λ‘ μμνλ μμ²μ ν΄λΉνλ targetμΌλ‘ νλ‘μλ¨
- changeOrigin : νΈμ€νΈ ν€λμ μΆμ²λ₯Ό λμ URLλ‘ λ³κ²½νμ¬ CORS λ¬Έμ ν΄κ²° π cross origin νμ©
- pathRewrite : ν΄λΉνλ κ²½λ‘λ‘ λ°κΎΈκΈ°
'FE' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[FE] λΉλκΈ° (0) | 2024.06.17 |
---|---|
[FE] Vuex (0) | 2024.06.17 |
[FE] Vue2 λ¬Έλ² μ 리 1 (0) | 2024.06.11 |
[FE] Vue κ°λ λ° μ€μΉ (0) | 2024.06.10 |