How to link to a html page in vue.js?

Question

How do i link/redirect to a html page that has it own cdn in vue.js These html page are some old project that i made in the past that i want to link to. I have only install the webpack-simple and vue-router.

<div id="navMenu">

  <ul>

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

  </ul>

</div>

The script

<script>

  export default {

    data () {
      return {

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

    }
  }

</script>

I'd just use a normal <a href="..."> to link to static assets outside of Vue. — Daniel Beck
– Daniel Beck, Commented Feb 2, 2019 at 15:26
@DanielBeck when i do it, i get a blank page with Cannot GET /assets/project/projectOne/drone.html — RisingCode
– RisingCode, Commented Feb 2, 2019 at 15:37
Ah, I see, sorry; you also need to make sure webpack knows about the static files (easiest way, assuming you're using vue-cli, is to use the public folder: cli.vuejs.org/guide/…) — Daniel Beck
– Daniel Beck, Commented Feb 2, 2019 at 15:44
@DanielBeck can you help me out a little bit more i have put the code on the display. — RisingCode
– RisingCode, Commented Feb 2, 2019 at 16:36

Daniel Beck · Accepted Answer · 2020-12-28 15:56:56Z

1

Assuming these are static files, separate from your Vue project, that you don't need to run through webpack, and that you're using vue-cli for scaffolding:

Put the static files inside the public directory (at the root level of your project). Anything you put in there will be copied directly into the dist folder at build -- so public/foo.html would wind up at the root level inside dist; /public/project/projectOne/drone.html would wind up in /dist/project/projectOne/drone.html, etc.

Link to those files from within your Vue project as you would any normal external site or file (using the project BASE_URL if necessary):

<!-- 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
      }
    }
    // ...

edited Dec 28, 2020 at 15:56

answered Feb 2, 2019 at 20:11

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RisingCode Over a year ago

I have created a folder name public and put it in the root level with your code but i now get Cannot GET /undefinedproject/projectOne/drone.html with a undefined instead.

Daniel Beck Over a year ago

That looks like the BASE_URL is undefined. Are you using vue-cli? I just noticed you mention "simple-webpack", if you mean this is your whole webpack setup then you're going to be missing a lot of important stuff, that's really just for quick tests and mockups.

RisingCode Over a year ago

Yes i have only install the webpack-simple and vue-router. What more do i need to install then?

Daniel Beck Over a year ago

vue-cli is the de facto standard (I apologize for not realizing you weren't using it already). Or you could leave your project as is and host / link to these html files externally.

Collectives™ on Stack Overflow

How to link to a html page in vue.js?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related