阿超 > vue开启https并局域网访问

vue开启https并局域网访问

2024-12-27

前端

如果不想在世界上虚度一生，那就学习一辈子。——高尔基

假设你在项目根目录下，新建一个 certs 文件夹，用于存放生成的证书：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 进入项目根目录
cd your-vue-project

# 新建一个存放证书的目录
mkdir certs
cd certs

# 1) 生成私钥 server.key
openssl genrsa -out server.key 2048

# 2) 生成证书签名请求 server.csr（过程中会要求填写一些信息，可直接回车）
openssl req -new -key server.key -out server.csr

# 3) 使用 server.key 自签 server.csr，生成自签名证书 server.crt，设定有效期 365 天
openssl x509 -req -in server.csr -signkey server.key -out server.crt -days 365

执行完后，certs 目录下会有：

  • server.key：私钥
  • server.crt：自签名证书
  • server.csr：证书签名请求文件（可删除或留存都行）

完整的bash

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
The default interactive shell is now zsh.
To update your account to use zsh, please run `chsh -s /bin/zsh`.
For more details, please visit https://support.apple.com/kb/HT208050.
(base) GithubIireAchao:voice-chat achao$ mkdir certs
(base) GithubIireAchao:voice-chat achao$ cd certs
(base) GithubIireAchao:certs achao$ openssl genrsa -out server.key 2048
(base) GithubIireAchao:certs achao$ openssl req -new -key server.key -out server.csr
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:
State or Province Name (full name) [Some-State]:
Locality Name (eg, city) []:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:
Email Address []:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
(base) GithubIireAchao:certs achao$ 
(base) GithubIireAchao:certs achao$ openssl x509 -req -in server.csr -signkey server.key -out server.crt -days 365
Certificate request self-signature ok
subject=C = AU, ST = Some-State, O = Internet Widgits Pty Ltd
(base) GithubIireAchao:certs achao$

然后配置vite.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import fs from 'fs'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        vueDevTools(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        },
    },
    server: {
        host: '0.0.0.0',
        port: 3000,
        https: {
            key: fs.readFileSync(path.resolve(__dirname, 'certs/server.key')),
            cert: fs.readFileSync(path.resolve(__dirname, 'certs/server.crt')),
        },
    },
})