i am developing a web application with laravel and vue
i deploy application in this route in host:
https://novintech.info/panel
anything is true but chunks file have wrong path and refer to:
https://novintech.info
for example:
https://novintech.info/js/home.js //this is chunk file
how to refrence this file to:
https://novintech.info/panel/js/home.js
please help. thanks
problem solved by adding output.publicPath property in webpackconfig
mix.webpackConfig({
output: {
publicPath: 'https://novintech.info/info/public/',
}
});
Once you ran the production script, go to the file generated folder public/, open the file app.js in an editor.
Research for js/chunk and replace it by info/public/js/chunk.
Related
Script is loading just fine in other pages but not loading on dynamic pages in NuxtJS. My nuxt.config.js file reference -
head: {
script:[
{ src: 'test.min.js' }
],
}
[NB] The test.min.js file is in root of static directory.
Dynamic route e.g. products/_slug/index.vue
GET http://localhost:3000/products/abc-def/test.min.js net::ERR_ABORTED 404 (Not Found)
Can you please help me resolve this issue? Thank you.
Try to specify an absolute path with something like
/test.min.js
#/test.min.js // or maybe this one
##/test.min.js // or even this one
You have to specify an absolute path as kissu mentioned and also you can try this:
~/test.min.js
In many times it works too
I am a beginner of Vue and I am trying to build a multi-page web application with Vue for practice. But I am having this problem below:
Failed to compile.
./src/index/views/Home.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/index/views/Home.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '#/components/HelloWorld.vue' in '/home/Username/Web/wk_front_end/src/index/views'
Here is the file tree of my project, every file is generated by Vue because I only want to test the multi-page, so I think it wouldn't be a coding problem.
Here is what I did:
I created a folder called the index under the src folder, I then move all the files and folders that originally under src to index because I wish the components and assets are only used in the corresponding page.
My vue.config.js is:
module.exports = {
pages: {
index: {
entry: "src/index/main.js",
template: "src/index/index.html",
filename: "index.html",
title: "Index Page"
},
}
}
When I try to run it, I got the error above on the chrome window. And actually, the error is:
I think it might be caused by missing of configurations, but I really cannot figure out what those other configurations I need.
Does anyone have similar problem before? Does anyone know how to solve it? Or, does anyone have some successful multi-page example that I could take a look?
Really thanks for the help.
I believe # is a shortcut for the src folder. Which would mean your current path resolves to src/components/HelloWorld.vue.
You could try doing #/index/components/HelloWorld.vue, which should be the correct path.
From my sight you may be importing your Vue components incorrectly. If you want to make multi-page-app why don't you try vue-router ? Maybe it's not the direct solution for your problem but it will help you to better manage your pages (routes) in the future.
I'm trying to implement a service worker for my website. I used SWPrecacheWebpackPlugin with vue and registering and so on works well. Somehow it doesn't cache all files, in this case I guess the most important app.js file.
When I'm online the file structure built by vue looks like the following:
But when I check the cache the app.js file is missing and in offline mode i just get a white page.
So obivously the service-worker is up and running and is even caching some stuff, but not the relevant app.js file.
My webpack config looks like the following:
new SWPrecacheWebpackPlugin({
cacheId: 'xxx',
filename: 'service-worker.js',
staticFileGlobs: ['dist/**/*.{js,html,css}'],
minify: true,
stripPrefix: 'dist/'
})
I have actually no idea what I am missing.
Update:
The app.js file was too big and wasn't cached by the PlugIn. No warning, no error, nothing...
I have started a project with vue-cli 3, my current directory tree is:
/
/dist
/public
index.html
favicon.ico
/src
/assets
/components
/plugins
when I run vue-cli build I get all sources bundled into app.js under /dist.
My goal is to bundle another bundle, say special-app.js from a few scripts either under /public or from a special directory under /src.
I was not able to achieve this in any way using the tsconfig or trying to augment the webpack config via vueconfig.js.
How can I bundle say /src/special/a.ts and /src/special/b.ts -> /dist/special.js?
UPDATE #1
I have tried the solution proposed by #digitaldrifter
config.entryPoints.delete('app');
config
.entry('app')
.add(path.resolve(__dirname, './src/widget/main.ts'))
.end()
config.entry('runner')
.add(path.resolve(__dirname, './src/donr/donr.ts'))
.add(path.resolve(__dirname, './src/donr/donr.scss'))
.end();
result is that there is no runner.js or runner.html at the end
UPDATE #2
The only way I got this to build correctly was to use pages https://cli.vuejs.org/config/#pages
pages: {
widget: {
entry: 'src/widget/main.ts',
template: 'public/index.html',
filename: 'index.html'
},
donr: {
entry: 'src/runner/donr.ts',
template: 'public/donr.html',
filename: 'donr.html'
}
}
build wise this worked! I got:
File Size Gzipped
dist/widget.js 4723.88 kb 841.16 kb
dist/app.js 4723.88 kb 841.16 kb
dist/donr.js 236.48 kb 56.84 kb
dist/test.js 191.93 kb 42.07 kb
PROBLEM
when I do vue-cli serve the donr.js is served as an HTML... while when I do build donr.js under /dist is all JS with the webpack header and all that good stuff. I do not understand why and I do not understand how to see the files that dev-server is serving, it is abstracted from me.... any ideas how to solve this?
UPDATE #3
forced dev-server to dump compiled files to disk.
I do not even see donr.js, while i do see it when i just build.
I am slowly coming to the idea that dev-server has a bug somewhere....
Github URL with the issue:
https://github.com/amoldavsky/vue-multi-bundle/tree/master
run npm serve VS npm build
any ideas?
You need to configure the webpack entry points.
Using chainWebpack option:
chainWebpack: config => {
// first clear the default app entry point
config.entryPoints
.delete('app')
// add a new entry with the necessary files
config.entry('special')
.add('/src/special/a.ts')
.add('/src/special/b.ts')
.end()
// you can split the bundle by entries also
config.entry('special-a')
.add('/src/special/a.ts')
.end()
config.entry('special-b')
.add('/src/special/b.ts')
.end()
}
I get an error while i try to include the js file which is in the same folder. I tried cleaning my project but was of no use.
The console says "error loading path".
Please help.
var db={}
Titanium.include('windows/gallery');
var displayButton= Ti.UI.createButton({
title:'Display',
onClick:function(){
db.gallery.open();
}
});
I have used open function which opens the file. The open file works has no problem.
usually, we use require('files/myFile'), where :
Resources/files/myFile.js is the path (note that require doesn't use the .js)
The js file is NOT at the same level that app.js, but included in Resource folder.
So here, you should do
Titanium.require('windows/gallery');
instead of
Titanium.include('windows/gallery');
By the way, the previous method was Titanium.include('windows/gallery.js');
Note the .js at the end of the include version.
Is it a mobile or desktop version ?