Vue Cli 4 not copying index.html to output path - vue.js

I need to copy the index.html in public to a specific folder defined in public path, but this is not working as I expect.
I also don't want the cli to include header and scripts references in the html file.
My index html output should contains only: <div id='app'></div> plus some specific html tags required by our CMS system.
For that I use:
chainWebpack: config => {
// disable splitting of JS files for dist folder
config.optimization.delete('splitChunks')
config.plugins
.delete('html')
.delete('prefetch')
.delete('preload')
}
But my index.html is not being copied to my output path.
If I remove .delete('html'), index.html will copy normally, but with headers and script references.
I had the same with Vue Cli 3 and this used to work. What am I missing?

Related

How do i access a file inside the angular 10

My folder structure of Angular 10 project is given below
-Backend
-e2e
-node_modules
-src
I want to access backend/uploads/profilepic.jpg in the angular's index.html page. Simply, i just want to load an image file in the front end which is uploaded in the backend folders.
A static resource, like an image, is either bundled inside the angular webapp, by adding it to the assets folder (e.g. 'src\assets\images') and have that folder referenced inside angular.json:
"assets": [
"src/assets"
],
Or, make the backend serve that image and simply access it from the frontend like this:
<img alt="xyz" src="https://yourdomain/img_test.png">
If both the backend and frontend are hosted on the same domain, you can use relative path for the URL, i.e https://yourdomain can be omitted.
Finally, I found the solution. In order to access the files of the 'uploads' folder which is located in the backend folder. I have to make that folder static. for that in my server.js file, I have added below code
app.use('*/uploads',express.static('uploads'));
after that, I could load my image file from that uploads folder by calling
http://localhost:8090/uploads/image.jpg

Vue js problems when building outside the src folder

I am working on an MPA with Vue and codeigniter. I have the following architecture:
-htdocs(root)
- application
- src
- views
- models
- controllers
I work with my frontend basically in the src directory and the others are codeigniter MVC model directories. What I am doing is configuring the webpack to build directly in the views directory so that my codeigniter can consume the generated htmls, configured as follows: (in this case I set it up in the vue.config.js file
)
outputDir: './views'
Up to this point everything works fine, wepback does the bundles and generates all the necessary files inside my views directory.The problem now is that the path to the files is the root of the project. Then he tries to fetch the files like this:
<link rel="preaload" href="/css/chunk-common.45fe69c2.css" as="style">
So that it points to the correct path (application/views) I made the following configuration in the vue.config.js:
assetsDir: './views'
But now when he is going to do the build I have the following warning and the files bundle is not completed.
Does anyone know why this happens?
Assuming you want to access static assets under the base URL http://example.com/application/views/..., you'll want to set the publicPath property in your config
// vue.config.js
module.exports = {
outputDir: 'views',
publicPath: '/application/views/',
// ...
}
FYI, if you ever do want to use assetsDir, don't prefix it with ./
A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.
An example would be
assetsDir: 'assets'
which would dump files in views/assets/css, views/assets/js, etc.

Injecting css link in Vue CLI build output

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.

Using env variables in public path (not index.html file) in a vue.js project

Is it possible to use env variables inside a .html file (public path) but not the index.html one
i have tried and it works fine in index.html but in any other .html file it doesn't work, for example if write this in img src:
<img src="<%= VUE_APP_API_Base %>/Image" border="0" style="width: 468px; height:60px;">
It doesn't parse anything from the .env files and src is written as it is instead of using the value of env variable. When visiting that html page url encode error is thrown in console.
Structure of my directory is:
public
|-- index.html
`-- sub-folder
`-- sub.html <<<=== This is the file where I want to use .env variable
EDIT: To clarify about duplicate, I am asking specifically how to include a variable from .env file in a non-root html file (index.html), the duplicate asks about using multiple html files with webpack which is a different scenario
Link to Vue.js docs explaining the solution for this problem
The global BASE_URL and NODE_ENV actually works fine but not anything from my .env files.

Link to file that opens in browser

I'm trying to provide a link to a gpg file on a webpage. Irrespective of relative path or absolute (static asset), on clicking the link, the index page keeps re-appearing. I don't want to use js to read the contents of gpg and render that. Instead, I want the browser to handle opening of the file (either open or download). Not working with other file types as well.
I have tried adding webpack config for this particular file type (file-loader/url-loader). Using raw-loader I can read the contents of the file, but I don't need that. Tried adding the file as an import.
To reproduce, create new project with vue-cli. Add this to App.vue template: Link
Create vue.config.js:
chainWebpack: config => {
config.module
.test(/\.gpg$/)
.use('file-loader')
.loader('file-loader')
.end()
}
}
Kindly suggest a way to include links to file present on the same domain. I don't want the vue app to handle rendering of such files.