1

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>
4
  • I'd just use a normal <a href="..."> to link to static assets outside of Vue. 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 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/…) 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. Commented Feb 2, 2019 at 16:36

1 Answer 1

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
      }
    }
    // ...
Sign up to request clarification or add additional context in comments.

4 Comments

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.
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.
Yes i have only install the webpack-simple and vue-router. What more do i need to install then?
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.