vue网页如何让http和https都可以访问
时间: 2024-05-18 08:18:15 浏览: 12
要让Vue网页同时支持HTTP和HTTPS访问,需要进行如下步骤:
1. 在Vue项目的根目录下找到config/index.js文件,找到dev对象和prod对象,分别添加以下代码:
```javascript
dev: {
// ...
port: 8080,
https: false // 添加此行代码,表示开启HTTP访问
},
prod: {
// ...
https: true // 添加此行代码,表示开启HTTPS访问
}
```
2. 在Vue项目中安装http-server和https-localhost两个插件。
```bash
npm install http-server https-localhost --save-dev
```
3. 在Vue项目的config/index.js文件中找到devServer对象,添加以下代码:
```javascript
devServer: {
// ...
https: true, // 添加此行代码,表示开启HTTPS访问
https: {
key: fs.readFileSync('./certs/server.key'),
cert: fs.readFileSync('./certs/server.crt'),
ca: fs.readFileSync('./certs/ca.crt')
},
before(app) {
app.use(
'/api',
httpProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
})
)
}
}
```
其中,fs.readFileSync()方法用于读取证书文件,httpProxyMiddleware用于配置反向代理。
4. 在Vue项目根目录下创建certs目录,将你的证书文件(server.key、server.crt、ca.crt)放入该目录。
至此,Vue项目就支持同时支持HTTP和HTTPS访问了。同时,需要注意的是,由于HTTPS访问需要证书,因此需要在浏览器中信任该证书才能正常访问。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)