HTTPS站点访问Vue前端路由子页面提示不安全连接问题

使用Vue.js开发前端、Node.js作为后端搭建网页项目，访问站点首页https://example.test时浏览器显示连接为安全状态，但跳转访问其他路由链接（如https://example.test/dashboard）时提示连接不安全。

现有配置 #

vue.config.js 中 devServer 配置 #

"devServer": {
    allowedHosts: ['example.test'],
    host: "0.0.0.0",
    port: 443,
    server : {
      type: "https",
      options: {
      key: fs.readFileSync('/usr/app/key.pem'),
      cert: fs.readFileSync('/usr/app/cert.pem')
    }},
    hot: true
  }

router/index.js 路由配置 #

Vue.use(VueRouter)

const routes = [
    {
        path: "/sign-in",
        name: "signIn",
        component: SignIn,
        meta: {
            requiresNotAuth: true
        }
    },
    {
        path: "/dashboard",
        name: "dashboard",
        component: Dashboard,
        meta: {
            requiresAuth: true
        }
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

补充说明 #

• 首页https://example.test安全状态参考：
• /dashboard路由页面https://example.test/dashboard安全状态参考：

路由配置本身没有语法或逻辑错误，问题出在devServer配置缺失，以及可能存在的混合内容加载问题。

1. 补全vue.config.js中devServer的缺失配置，修改后完整配置如下：

devServer: {
    allowedHosts: ['example.test'],
    host: "0.0.0.0",
    port: 443,
    server : {
      type: "https",
      options: {
        key: fs.readFileSync('/usr/app/key.pem'),
        cert: fs.readFileSync('/usr/app/cert.pem')
      }
    },
    hot: true,
    historyApiFallback: true,
    client: {
      webSocketURL: 'wss://example.test/ws'
    }
  }

配置说明：

• historyApiFallback: true：适配Vue Router的history模式，避免直接访问/刷新子路由时，服务端返回异常响应触发非预期跳转
• client.webSocketURL：强制热更新HMR的WebSocket连接走WSS加密协议，且连接域名和证书绑定域名一致，避免证书域名不匹配触发安全提示

2. 排查Dashboard组件的资源加载逻辑：

   • 移除所有http://开头的静态资源引用（图片、字体、第三方脚本、样式文件），替换为https://开头路径或协议相对路径//开头
   • 所有接口请求统一使用HTTPS协议，避免混合内容拦截导致浏览器标记连接不安全

3. 检查全局路由跳转逻辑，不要使用写死的http://example.test/xxx格式跳转地址，优先使用路由名跳转、相对路径跳转，或https://开头的绝对路径跳转。

修改完成后重启本地开发服务即可生效。

内容的提问来源于stack exchange，提问作者wsn