Cách config base link trong dự án vuejs, nuxtjs
Anh chị cho em hỏi trong laravel khi khai báo base link trong blade thì em thường dùng config ( config('my.default_user_avatar') ) Vậy thì sang vuejs / nuxtjs thì config base link ở đâu là hợp lý nhất ạ? Rất mong được anh chị giúp đỡ, em xin cảm ơn ạ!
1 CÂU TRẢ LỜI
Bạn sử dụng environment variable ý, kết hợp dotenv
để có thể khai báo qua file .env
như Laravel. Tất cả các environment variables sẽ được chứa trong biến global process.env
. Khi solve một environemnt sẽ như sau:
process.env.BASE_URI
.
Lúc này bạn có thể viết thêm một function javascript để render url cho tiện.
const url = (path = '') => `${BASE_URI}/${path}`
Ngoài ra:
- Với Vue.js thuần thì bạn cần cài thêm
EnvironmentPlugin
cho webpack. https://webpack.js.org/plugins/environment-plugin/ - Còn trong Nuxt.js thì nó đã config sẵn rồi, bạn chỉ cần thêm environment vào cho Nuxt.js app qua
nuxt.config.js
như sau thôi:
module.exports = {
env: {
BASE_URI: 'https://viblo.asia'
}
}
Em cảm ơn gợi ý của anh, em đã tìm hiểu và làm được rồi ạ!
You're welcome!
nếu là laravel và dùng mix để build mà muốn pass env qua js thì chỉ cần thêm prefix "MIX_" vào biến env muốn pass, số khác vẫn bt không sợ bị leak.
Mà tốt nhất là không dùng env cho những config làm gì, tạo thư mục config chứa các file config là js, json hay gì tùy bạn, 1 file index export function config. function này nhận string kiểu "something.some.thing" như laravel, và trả ra giá trị mong muốn là đc