با سلام

در پست امروز میخوام در مورد اجرای اپلیکیشن های vue.js روی https در هنگام development صحبت کنم. زمانی نیاز داریم برای بررسی بخشی از قابلیت های اپلیکیشنی که مینویسیم توی مود development هم اپ روی https باشه (در کل بهتره از اول همینجوری باشه) بنابراین با استفاده از روش ساده زیر می‌توانید این کار رو انجام بدید. من در vue از فریم ورک quasar استفاده می کنم ولی تنظیمات این بخششون تقریبا شبیه هم هست.

برای تولید کلیدها و ثبت اونها در Windows system store یا macOS system store یا هر سیستم عاملی از ابزار mkcert استفاده کنید. توضیحاتش در صفحه اول پروژه در github موجوده برای دسترسی به github پروژه هم می تونین از یکی از دو لینک زیر استفاده کنید (هر دو به یک آدرس اشاره می کنه):

• https://mkcert.dev
• GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd like.

من در ویندوز این قدم ها رو اجزا کردم:

- نصب mkcert با Chocolatey

choco install mkcert

- ساخت یک Certificate برای localhost

$ mkcert -install
Created a new local CA 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

$ mkcert localhost

هر فولدری این را اجرا بکنید در پایان اجرای دستور آدرس ۲ فایل تولید شده شامل certificate و کلید را به شما می دهد.

این دو فایل را کپی کرده و در روت اپلیکیشن خودتون قرار بدید.

من از quasar استفاده می کنم بنابراین quasar.conf.js رو به این صورت تغییر دادم:

    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
    devServer: {
      port: 8080,
      open: true, // opens browser window automatically
      server: {
        type: "https",
        options: {
          cert: path.join(__dirname, "/localhost.pem"),
          key: path.join(__dirname, "/localhost-key.pem"),
        },
      },
    },

اگر هم از vue cli استفاده می کنیم vue.config.js را به صورت زیر تغییر دهید:

const fs = require('fs')

module.exports = {
    devServer: {
        https: {
          key: fs.readFileSync('./certs/localhost-key.pem'),
          cert: fs.readFileSync('./certs/localhost.pem'),
        },
        public: 'https://localhost:8080/'
    }
}