用 window.open 打开新标签页

最直接的办法就是在方法里调用 `window.open(url, '_blank')`。比如你有个按钮，点击后打开外部文档：

<template> <button @click="openDocs">查看文档</button> </template> <script> export default {  methods: {  openDocs() {  window.open('https://vuejs.org', '_blank') } } } </script>

<a href="https://vuejs.org" target="_blank" rel="noopener">Vue 官网</a>

`rel="noopener"` 是个好习惯，防止新页面通过 `window.opener` 拿到原页面的控制权。有些团队会忽略这个，但安全审计时经常被提出来。

在当前标签页跳转外部链接

如果你不想开新标签，而是让当前页面直接跳到外部地址，用 `window.location.href = url`。这在做支付跳转、OAuth 登录时很常见。比如用户点击“使用 GitHub 登录”：

loginWithGitHub() {  const clientId = 'your_client_id' window.location.href = `https://github.com/login/oauth/authorize?client_id=${ clientId}` }

注意别用 `this.$router.push`，因为 Vue Router 的 `push` 只接受应用内部的路由路径。你传一个完整的 `https://` 地址进去，它要么报错，要么把你带到一个不存在的路由，结果就是 404 或者空白页。我调试过好几次这种问题，最后都是换成 `window.location` 解决的。

Vue 应用本身怎么在浏览器里打开

另一种理解是：你写了一个 Vue 项目，怎么让它在浏览器里显示出来。这需要经过构建和部署。开发阶段用 `npm run serve` 或者 `npm run dev`，Vite 和 Vue CLI 会启动一个本地服务器，默认在 `localhost:8080` 或 `localhost:5173`。浏览器输入这个地址就能看到页面。

生产环境要把代码打包成静态文件。`npm run build` 之后会生成一个 `dist` 文件夹，里面是 `index.html`、JavaScript 和 CSS。把这个文件夹扔到 Nginx、Apache 或者 Vercel、Netlify 上，浏览器访问对应的域名就能打开。有个坑：Vue Router 的 history 模式需要服务器配置 fallback 到 `index.html`，否则用户刷新非根路径时会 404。我见过一个上线项目因为没配这个，用户刷新 `/user/profile` 直接看到 Nginx 的 404 页面，还以为网站挂了。

如果你只是想在本地快速打开一个 Vue 写的页面，又不想装 Node 环境，可以用 CDN 引入 Vue 的全局构建版本，写个 `index.html` 双击就能跑：

<div id="app">{ {  message }}</div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> Vue.createApp({  data() {  return {  message: 'Hello Vue' } } }).mount('#app') </script>

这种方式适合做 demo 或者给后端同事演示，但正式项目还是走构建工具更靠谱。我个人的判断是：小页面、临时验证用 CDN，超过三个组件就上 Vite，别犹豫。

打开网页这个动作在 Vue 里没有魔法，选对 API 就行。外部链接交给浏览器，内部路由交给 Vue Router，应用部署交给构建工具。分清楚这三层，基本不会踩坑。