vue項(xiàng)目本地開啟https訪問模式
在實(shí)際開發(fā)中，我們除了以http的形式進(jìn)行頁(yè)面訪問，還會(huì)以https形式進(jìn)行頁(yè)面訪問，但是根據(jù)vue-cli的版本不同，配置方式也有所差異，以下分別從vue-cli3.x、vue-cli4.x和vue-cli2.x構(gòu)建的項(xiàng)目分別進(jìn)行配置開啟https:
1、vue-cli3.x和vue-cli4.x
使用vue腳手架3.x和vue-cli4.x搭建的項(xiàng)目，配置開啟https方法比較簡(jiǎn)單，在項(xiàng)目根目錄下的vue.config.js文件中增加屬性 https: true 即可。
// vue.config.js
module.exports = {
// 配置 webpack-dev-server 行為。
devServer: {
open: true, // 編譯后默認(rèn)打開瀏覽器
host: '0.0.0.0', // 域名
port: 8080, // 端口
https: true, // 是否https
// 顯示警告和錯(cuò)誤
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'http://xxx..com',
changeOrigin: true, //是否跨域
ws: false, // 是否支持websocket
secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
pathRewrite: {
'^/api': ''
}
}
}
}
}
2、vue-cli2.x
使用cli2.x搭建的項(xiàng)目開啟https較為復(fù)雜，關(guān)鍵是openssl生成證書文件，如果本地沒有證書，要先生成證書，以及修改項(xiàng)目中配置
① 在build文件夾下新建 cert 文件夾，在cert目錄下打開控制終端輸入以下命令生成私鑰 privatekey.pem 文件
openssl genrsa -out privatekey.pem 102
② 通過上面生成的privatekey.pem私鑰文件生成CSR 證書簽名certrequest.csr，根據(jù)要求填寫一些相關(guān)信息，可一路按回車即可
openssl req -new -key privatekey.pem -out certrequest.csr
③ 根據(jù)上述私鑰文件和csr證書簽名文件生成證書文件
openssl x509 -req -in certrequest.csr -signkey privatekey.pem -out certificate.pem
最終生成3個(gè)文件：
3、在項(xiàng)目中webpack.dev.conf.js配置
4、重新npm run dev啟動(dòng)
注意： chrome可能會(huì)出現(xiàn) 您的連接不是私密連接文章來源：http://www.zghlxwxcb.cn/news/detail-840504.html
解決方案：
1、解決辦法就是在當(dāng)前頁(yè)面用鍵盤輸入 thisisunsafe ，不是在地址欄輸入，就直接敲鍵盤就行了，頁(yè)面即會(huì)自動(dòng)刷新進(jìn)入網(wǎng)頁(yè)。
2、使用 Firefox文章來源地址http://www.zghlxwxcb.cn/news/detail-840504.html
到了這里，關(guān)于vue項(xiàng)目本地開啟https訪問模式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
