Imports of png images fail to resolve locally (in development mode, running npm vite). They do resolve in the production build however. At first I imported them dynamically but they wouldn't resolve in the production build so I imported them beforehand.
//.ts file
import test from "../assets/sprites/test.png"
//vite.config.ts
export default defineConfig({
plugins: [vue()],
build: {
target: 'esnext'
}
})
test.png:1 GET http://localhost:3000/frontend/src/assets/frontend/src/assets/sprites/test.png 404 (Not Found)
To fix this issue, use new URL(url, import.meta.url) to resolve static assets both in prod and dev
See Vite documentation on Static Asset Handling : https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url
const test = new URL('../assets/sprites/test.png', import.meta.url).href
Related
I have a vue project which uses Vite in place of Webpack, and when I try to use import x from './src/assets/my/path/to/image.png' to resolve an image to compile-time URL, I am greeted by the following error message:
✘ [ERROR] No loader is configured for ".png" files: src/assets/my/path/to/image.png
The entire project is pretty close to the scaffold project given by npm init vue#latest (using vue3) so my vite.config.js is pretty basic:
export default defineConfig({
plugins: [vue(), VitePWA({})],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
build: {
manifest: true,
polyfillModulePreload: true,
}
});
What am I missing? How can I configure this? I can't find anything in Vite documentation about loaders.
I had a quite similar issue with my project that I couldn't really solve. The issue seemed that only initially loaded png files were added. Because I am new to Vite, my efforts with the vite.config.js were fruitless.
Instead, I found a different solution to import the assets (import img from '/path/to/img.png' ) in respective js files directly instead of vite.config.js. Since I used these assets for replacement images for toggling buttons, it was a quick fix. Maybe it helps you, too.
I use the nuxt generate command (npm run generate) to generate the static client side site of my Nuxt project.
export default {
target: 'static',
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: false,
}
in my nuxt.config.js
but when I open the index.html generate is showing nothing and I got this error:
Any idea on how to solve this !?
Thank,
I am trying to reuse Nuxt.js components from one project in another project. So I created a new project which imports the components needed and then exports them as a npm package.
npm package (main.js)
import SomeComponent from '../foobar/SomeComponent.vue'
export default {
install (Vue) {
Vue.component(SomeComponent)
}
}
export {
SomeComponent
}
npm package (webpack.config.js)
module.exports = {
entry: path.resolve(__dirname + '/src/main.js'),
output: {
path: path.resolve(__dirname + '/dist/'),
chunkFilename: '[name].build.js',
filename: 'build.js',
libraryTarget: 'umd',
libraryExport: 'default',
library: 'MyLibrary',
umdNamedDefine: true
}
}
Then in my new Nuxt.js project I can simply import the npm package and the components will be installed automatically. While this works fine when not using any code splitting it will throw an error when trying to use dynamic imports in the SomeComponent.vue file.
When adding dynamic imports in my component like so import(/* webpackChunkName: "mapbox" */ 'mapbox-gl') the chunks will be created but when running Nuxt in development mode I always get the error:
Uncaught (in promise) ChunkLoadError: Loading chunk 1 failed.
Nuxt does not find the created chunk files. I tried playing around with publicPath but I don't get what path would be the right one for Nuxt to be able to access them?
https://nuxtjs.org/api/configuration-build#babel
I originally left the presets as default.
I then followed the suggestions on
https://github.com/nuxt/nuxt.js/issues/1776
However this dealt more with pipelines
I am just trying to get it to convert the es6 to es5 (import chief among the reasons)
I get the same result or a complete failure no matter if i add the .babelrc, adjust package.json, adjust nuxt.config.js or a combination of them.
currently i have adjusted my nuxt.config.js to:
/*
** Build configuration
*/
build: {
babel: {
presets: ['#babel/preset-env'],
configFile: false,
babelrc: false,
plugins: ['#babel/plugin-syntax-dynamic-import']
}
}
When i upload the entire .nuxt folder to my server (running plesk using phusion passenger)
I get the following error
/var/www/vhosts/website.com/app/client/server.js:1
(function (exports, require, module, __filename, __dirname) { import { stringify } from 'querystring'
My site root is
/var/www/vhosts/website.com/app/client/
The first line of server.js
import { stringify } from 'querystring
Changing this to
var stringify = require("querystring").stringify
Eliminates the error however i would need to go through page after page to remove this. My understanding is i can progamically adjust this using babel. But no matter what ive tried the file stays the same.
I did use the Nuxt CLI to automatically set up babel and webpack but using the above build config is not the default. I have attempted to play with it but i get the same result
I added babel/polyfill to try and get around the import issues without any success
I am working on a Vue.js project and all files are generated by webpack on dev and production mode.
but here is my problem :
I can see my vue components in devtools when I inspect on a element.
How could I disable that ?
By the way source map is disabled and I have no .map files in dist folder.
thank you :)
Just checkout the Vue cli docs:
productionSourceMap Type: boolean
Default: true
Setting this to false can speed up production builds if you don't need
source maps for production.
So in your webpack config you write:
module.exports = {
productionSourceMap: false
};
If your vue.config.js which is responsible for your webpack configuration doesn't exist, you may create it.
If webpack has been configured from scratch, it can be removed by deleting or commenting in any case in the webpack production file
the devtool option
tools/webpack.prod.js
module.exports = merge(common, {
// devtool: "source-map",
mode: "production",
...
});