如何链接到 vue.js 中的 html 页面？答案

【问题标题】：How to link to a html page in vue.js?如何链接到 vue.js 中的 html 页面？
【发布时间】：2019-02-02 14:08:58
【问题描述】：

如何链接/重定向到在 vue.js 中拥有自己的 CDN 的 html 页面这些 html 页面是我过去制作的一些旧项目，我想链接到。我只安装了 webpack-simple 和 vue-router。

<div id="navMenu">

  <ul>

       <li class="project">   
         <a :href="publicPath + 'project/projectOne/drone.html'">Drone</a> 
       </li>

  </ul>

</div>

脚本

<script>

  export default {

    data () {
      return {

        publicPath: process.env.BASE_URL
      }
    },
    methods:{

    }
  }

</script>

【问题讨论】：

我只需使用普通的<a href="..."> 链接到 Vue 之外的静态资源。
@DanielBeck 当我这样做时，我得到一个空白页，无法获取 /assets/project/projectOne/drone.html
啊，我明白了，对不起；您还需要确保 webpack 知道静态文件（最简单的方法，假设您使用的是 vue-cli，是使用 public 文件夹：cli.vuejs.org/guide/…）
@DanielBeck 你能帮我多一点吗？我已经把代码放在显示器上了。

标签： vue.js

【解决方案1】：

假设这些是静态文件，独立于你的 Vue 项目，你不需要通过 webpack 运行，并且你使用 vue-cli 来搭建脚手架：

将静态文件放在public 目录中（在项目的根级别）。您放入其中的任何内容都将在构建时直接复制到dist 文件夹中——因此public/foo.html 将在dist 内的根级别结束； /public/project/projectOne/drone.html 将在 /dist/project/projectOne/drone.html 等结束。

从你的 Vue 项目中链接到这些文件，就像你链接任何普通的外部站点或文件一样（如果需要，使用项目 BASE_URL）：

<!-- assuming the source file is in /public/project/projectOne/drone.html -->
<a :href="publicPath + 'project/projectOne/drone.html'">Drone</a>         

export default {
    data () {
      return {
        publicPath: process.env.BASE_URL
      }
    }
    // ...

【讨论】：

我已经创建了一个文件夹名称 public 并将其与您的代码一起放在根级别，但我现在无法 GET /undefinedproject/projectOne/drone.html 使用 undefined 代替。
看起来 BASE_URL 未定义。你在使用 vue-cli 吗？我刚刚注意到您提到“simple-webpack”，如果您的意思是 this 是您的整个 webpack 设置，那么您将丢失很多重要的东西，这实际上只是为了快速测试和模型。
是的，我只安装了 webpack-simple 和 vue-router。那我还需要安装什么？
vue-cli 是事实上的标准（我很抱歉没有意识到你还没有使用它）。或者您可以保留您的项目并在外部托管/链接到这些 html 文件。