When running npm run build my pictures under src/assets/... are not available in the dist directory / production build. So not shown on the site. In dev mode it works for sure.
Any ideas how to make them available after building?
Assets in src/assets must be referenced in the code (via import or similar) to be included in the bundle. If you just want static files to be bundled with your project, you should use public/ instead:
Static assets can be handled in two different ways:
Imported in JavaScript or referenced in templates/CSS via relative paths. Such references will be handled by webpack.
Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Related
When I publish the project: npm run build a folder that I created with images is missing from the dist folder.
I created this folder inside the src folder.
assets folder is also missing.
Where is it?
If you just want some folders included verbatim, put them in the public folder.
Any static assets placed in the public folder will simply be copied and not go through webpack. You need to reference them using absolute paths.
Things within src are only included if they're part of the bundle (ie they have been imported / required) and even then, any folder structure won't be preserved. Bundled items are typically renamed with a hash checksum and all put into a single folder like js, css, images, etc.
My project has static folder and asset folder.
I use quasar dev to build project and the building project is stored in dist folder. But in the dist folder, it only has static folder, it doesn't has asset folder.
How can I let asset be packaged in dist folder?
I also had some struggle working with these two directories in Quasar. So I was very happy when I found this page in the documentation. The difference between assets and statics is described as follows:
Assets vs Statics
Files in the “assets” folder are only included in your build if they have a
literal reference in one of your Vue files. Every file and folder from the > “statics” folder are copied into your production build as-is, no matter what.
So I guess that you currently do not use any of the files inside the assets directory in at least one of your components.
Example: One possible way to make logo.png be part of the dist folder is to use the asset in a Vue component like this (also taken from the docs): <img src="~assets/logo.png">. Afterwards run quasar build and check the output in your dist folder. Good luck!
I'm using the Vue CLI to build my application into one of my existing php projects. In case to work with generated files in php, I need to move the assets to the ../public/assets/ directory. Unfortunately, this does not seem to work in development environment (production mode works just fine, but I'd really need to test the integration of vue in the php app).
Am I doing something wrong or is it a known restriction?
Here's the config:
// vue.config.js
module.exports = {
outputDir: '../public',
assetsDir: './assets',
indexPath: './views/index.html'
};
As per the documentation, you can just copy the assets into your public/assets folder and reference them via absolute path.
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Static assets can be handled in two different ways:
Imported in JavaScript or referenced in templates/CSS via relative paths. Such references will be handled by webpack.
Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.
Because of HMR in development mode this is not yet possible to implement. Here's the reference to the communication on Vue.js' forum.
Trying to use the aurelia cli bundling facility.
Is it possible to serve all app files (i.e. index.html, app-bundle.html, app-bundle.js, etc) from a single directory or index.html must be at the top (./) directory and the other files in a child (./dist) directory?
Under the covers the cli is using JSPM / System.js's bundling functionality. This works by looking at your config.js paths on where to find the files both for the bundle and when serving. If your paths are set up to serve from the root directory this should work as expected. The problem will be that if you are trying to bundle root it will try to grab all .js files in there which could be bad if you don't exclude them.
Is there a way for gulp-less (or some other tool) to take the paths to images that are referenced in the .less/.css file and put the files to the destination folder?
Right now when I install a node module, I #import the css file from /node_modules/... directory to my main .less file and it will be included in the bundle, but the images that come with the module are still located under /node_modules/... folder which I don't plan to deploy so using a relative URL would be pointless.
You should consider using bower to split your dev dependencies (handled by npm, non-deployed stuff) and front-end libs (handled by bower, deployed stuff).
Using a .bowerrc like this, you can tell where to save the libs in you projects structure:
{
"directory": "./<your-public-folder>/libs"
}