So this is a project in Laravel with Vue+Vuetify frontend. I'm using Vue CLI. I have set Vue CLI's output directory to Laravel's public folder using vue.config.js, like this:
module.exports = {
configureWebpack: {
devtool: 'source-map'
},
devServer: {
proxy: 'http://localhost:8080/api/v1/',
},
outputDir: '../public',
indexPath: '../resources/views/index.blade.php',
}
This works. However mdi icons on the web page do not show. I understand that I need to add link tag <link href="https://cdn.jsdelivr.net/.../materialdesignicons.min.css" rel="stylesheet"> to the index file, but I don't know where do I add it. The index.blade.php is overwritten by the Build process every time.
Alternate path is to include that css file in the build process by installing npm package and adding a few lines to my main.js, but I'd rather avoid that since my output is already getting bigger.
Figured out soon after posting question. I'll post it here for my own record and for anyone else landing here.
The solution was simpler than I anticipated. Vue CLI uses contents of /public folder to generate build output. So the solution was to simply go to public/index.html and place the meta tag in there.
Note: In my case I created a Laravel project and then used Vue CLI to create a Vue project inside Laravel project folder, so my folder structure looked like this:
Laravel_Project
--app
--bootstrap
--...
--public
--Vue_CLI_Project
----src
----public
Note that there are two public folders: First one is in Laravel project's root directory, whereas the second one is inside Vue project's directory. We are talking about the second one here.
Related
I'm working on a portfolio in Vue.js. I added a button that allows the user to download a copy of my resume (a PDF file). The button works great in development. The file is in my public folder, which is supposed to be the static directory where all files are copied to the dist folder from. When I run the command vue build, the only thing copied from that folder is the index.html page. I have tried adding images to that folder and they are also not being copied over. My vue.config.js file looks like this:
module.exports = {
publicPath: '.'
};
So the relative paths are correct for the deployed files.
I have a similar setup working perfectly fine at my job, with the same version of Vue and vue-cli-service (both 6.14.11). I'm relatively new to Vue so any help would be greatly appreciated.
Edit: I've also noticed that even though I changed the <title> tag in public/index.html to "James Bell's Portfolio", the title in the production code is "Vue CLI App".
Here's the github repo: https://github.com/jamesthedev/portfolio
I figured it out! I was running vue build from the src folder. I needed to run vue-cli-service build from the root directory. Once I did that, all my static assets were copied to dist.
I'm publishing my SPA that I'm making with Vue and Buefy to my a gh-pages branch a of private repo, just so I can test if everything will load normally.
Later, I'll upload the finished website to the actual public repo, which is tied to my custom URL (I'm redesigning the website from scratch, using a diff tech).
Since Vue websites needs to be built for distribution, I'm using an NPM package to do this for me: https://github.com/KieferSivitz/vue-gh-pages
"deploy": "node ./node_modules/vue-gh-pages/index.js --branch gh-pages -m \"Deploy to gh-pages.\""
When deploying the website, it loads only partially. The images won't load, and the router will not work (links to other pages won't work).
I'm storing images in the assets folder, and using require('#/assets/logo.png') to load them (at least it works with localhost).
The images are trying to be loaded from https://<username>.github.io/img/logo.d2151712.png.
I read that I would need to set the publicPath to my project name, since currently the website is being served from https://<userName>.github.io/<projectName>/, but with that, the whole website is 404-ing.
With that property, the whole website would try to load from https://<username>.github.io/<projectName>/<projectName>.
I think that somewhere, there's a setting adding <projectName> to router, but not adding elsewhere.
Edit
I tried to force vue-router to get the correct base, without setting the publicPath:
base: "<projectName>/", //process.env.BASE_URL,
But the routes are stil not working, since I'm lazy loading them using import("#/views/Page.vue").
It seems that your issue is, that you want to run your Vue app in a subfolder of a domain (domain.com/subfolder/index.html). This needs to be configured in Vue CLI. Add a new file to the root of your repository, called vue.config.js and add the following content:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/subfolder/' : '/',
};
This will set the webpack publicPath to /subfolder/ when running the build process in production mode. If you are using Vue CLI < 3.3, you need to use baseUrl instead. You need to make sure, that your path starts with a slash.
See also the documentation of publicPath.
Vue CLI has also a special section for the deployment to GitHub pages. You might also want to take a look at this: https://cli.vuejs.org/guide/deployment.html#github-pages
I read that I would need to set the publicPath to my project name, since currently the website is being served from https://.github.io//, but with that, the whole website is 404-ing.
Indeed, the publicPath property is required to be set to the GitHub repo name, surrounded by slashes (i.e., /github_repo_name/). The 404's are caused by vue-gh-pages removing the leading slash from URLs in index.html:
<!-- <script src=/github-pages-vue-demo/js/chunk-vendors.c4b075fb.js></script> --> <!-- before -->
<!-- <script src=/github-pages-vue-demo/js/app.9b45ea45.js></script> --> <!-- before -->
<script src=github-pages-vue-demo/js/chunk-vendors.c4b075fb.js></script>
<script src=github-pages-vue-demo/js/app.9b45ea45.js></script>
With that property, the whole website would try to load from https://<username>.github.io/<projectName>/<projectName>.
That's a side effect of the slash-removal, making the URLs relative. Relative URLs are relative to the current location (appended to the current directory). For example, with this GitHub pages URL - https://tony19-sandbox.github.io/github-pages-vue-demo/, a relative URL of github-pages-vue-demo/js/app.9b45ea45.js would resolve to:
https://tony19-sandbox.github.io/github-pages-vue-demo/github-pages-vue-demo/js/app.9b45ea45.js
And an absolute URL of /github-pages-vue-demo/js/app.9b45ea45.js would resolve to:
https://tony19-sandbox.github.io/github-pages-vue-demo/js/app.9b45ea45.js
I think that somewhere, there's a setting adding <projectName> to router, but not adding elsewhere.
vue-router has a base property for that purpose, but Vue CLI (#vue/cli-plugin-router) correctly defaults it to process.env.BASE_URL. That environment variable is already equal to publicPath from your Vue CLI config, so there's no need to set it.
Workaround
If you wish to continue using vue-gh-pages, you could use patch-package to disable the slash-removal (index.js line 109) as shown below:
//editForProduction();
if (repository !== null) {
pushToGhPages();
}
GitHub demo
Otherwise, I would skip that library entirely, and use gh-pages directly in a deploy script.
Vue has a configuration for that. If you use vue client then add vue.config.js the next lines por public path property
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './':'/' };
I want to load a .jscad file into a vue component.
I have set up an vue-cli project, installed this openjscad-vue viewer using npm and am using the openjscad component. This component has the prop design which should allow specifying a path to a .jscad file for the openjscad viewer. This is not working properly.
Tried to find the error and do a workaround:
Inside this component (OpenJscad.Vue) is a fetch() request to load the .jscad file, but it doesnt work. To be sure that the openjscad processors is working correctly I used a plain string containing the .jscad code as source and this works!
But I want a whole .jscad file loaded.
I think the fetch request is the problem. I only need a static .jscad file to be loaded from the same server the vue-cli project is serving.
I've tried this:
using axios:
async mounted() {
[...]
await axios.get("/logo.jscad").then(response => (this.source = response));
installed raw-loader/file-loader and configure it inside vue.config.js. Imported the file from the assets folder. -> Webpack loader error. It seems to me that vue.config.js is ignored?
import logo from "logo.jscad"
this.source = logo
Any recommendation to solve this problem?
Thank you.
To answer part of my own question and maybe help other people:
the vue.config.js file do not have to be at same directory as package.json. It is only loaded and used after put inside the /src directory next to main.js or App.vue
I am not familiar with packing frontend projects. When I was writing frontend, we just used JQuery. So the problem is now I have a project created by vue-cli and packed by webpack.
But as I don't want to load libraries from my local server but from remote CDN. How should I change the yarn add dependencies into CDN based form during yarn build? What is the correct way to do this kind of packing?
I've searched a lot but cannot find a good solution, some may suggest adding all CDN in the head section. But that's difficult to manage.
1. update your public/index.html adding the vue script source for the cdn (preferably in the head)
<script src="https://cdn.jsdelivr.net/npm/vue#2.6"></script>
2. create a vue.config.js file in the project root with the following configuration. (if you already have the file, add configureWebpack block to it)
module.exports = {
configureWebpack: {
externals: {
Vue: "vue"
}
}
};
this will flag the Vue dependency as a global, and not add it into the vendor bundle. You can do the same with other dependencies like element-ui, vuetify, vuex, etc...
I´m starting with Vuepress (https://vuepress.vuejs.org), and i´d followed the docs to integrate it with an existing project (https://vuepress.vuejs.org/guide/getting-started.html#inside-an-existing-project). I used the sugested docs directory.
But now i need to "really" integrate with my project and i need to when my users access the my-project.com/docs, to reach the Vuepress docs
If i make (yarn docs:build), the /dist folder will be generated to be used anywhere as a statics HTML files. I tought in put the /dist/ content in the /static/ files of my project. But the vue-router response to /docs is a 404.
And i will still need to make 2 builds, my project and the docs.
The questions are:
How can i make the vue-router "see" the vuepress build files? Where to put them?
How can i integrate the run build of project to make them both?
I have 2 projects, one with quasar and the other i´m using vue-cli 3.
Thank you all.
How can i make the vue-router "see" the vuepress build files? Where to put them?
You don't, it's basically an external link. A simple <a href="/docs"> should be sufficient.
How can i integrate the run build of project to make them both?
You don't, you add a new task that does them both.
// package.json
{
"scripts": {
"build-project": "node build-project.js"
}
}
from a terminal
# yarn run build-project
I think maybe the point problem is to solve the Vue-Router to make the vue-router don't handle the link when we external link the /docs as like.