I'm using Vue CLI 3.3 and building vue projects for my vertical website, but every time I build the project, the assets of dist/index.html always load from my root path, like:
<script src=js/chunk-vendors.b0f460c7.js></script>
Is there a way to make these assets load from current path? Such as
<script src=./js/chunk-vendors.b0f460c7.js></script>
You can set publicPath in your vue.config.js (see https://cli.vuejs.org/config/#publicpath)
module.exports =
{
publicPath: './',
};
Related
Using Vue CLI, and Vue 2.
Anyone knows how to build the project using relative paths, so I can place it in any subfolder in my server and it will work? (for example www.mysite.com/subfolder/)
I've tried with
// vue.config.js
module.exports = {
publicPath: "",
};
And it builds the paths relative (ie, js/app.js instead of /js/app.js), but the app wont' load. Nothing shows on the page.
Strangest thing is that all files are loaded correctly (I can check on network tab in Chrome devtools), no JS errors, etc. So the page is loading all the files but it seems like it's refusing to mount the app when using relative paths.
I know that I can add the absolute path to the build process but that's not what I need. My client needs to be able to move the files freely from one subfolder to another and the app should work without the need to recompile
PS: Also tried building the project with Vite and Vue 3, same problem.
Thanks!
Alright, looks like all that's needed is:
build with a relative publicPath (empty string)
// vue.config.js
module.exports = {
publicPath: "",
};
add a <base> tag to the final HTML...
<base href="/subfolder/" />
For Vite, the export should be
// vite.config.js
export default {
...
base: "",
};
I have a VUE2 project and in the public folder I created an iframe.html file that will be loaded in an iframe.
That iframe will also load a javascript.js file that I want encoded/uglified upon "npm run build" but I also want to be able to access it during dev.
How could I proceed?
Should this js file be placed inside the /src/assets/ folder and referenced from the iframe.html file? If yes, any advice?
Or should it stay in the public folder and upod the dist folder being built, encode it with something.
Any solution is welcome, thanks in advance!
Edit: Here are further details of how I use the iframe.
First, I'm referencing the .vue file in the router like so:
{
path: "/pages/:id/edit",
name: "edit",
component: () => import("../views/Edit.vue"),
},
Next, in the Edit.vue file, I add the iframe like so (note how it's referencing iframe.html that is in the public directory):
<iframe
id="iframe"
ref="iframe"
src="iframe.html"
/>
Next, in the iframe.html it's just normal html code, with this part including the javascript.js file (that actually is in the public folder as well for now)
<script src="javascript.js"></script>
You can explicitly include the .js file in your Webpack config by adding a rule for UglifyJsPlugin:
npm i -D uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
...
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
include: /\/regex-for-file/,
minimize: true
})
]
}
...
};
In Vue.config.js, this might look like:
configureWebpack: {
plugins : [
new webpack.optimize.UglifyJsPlugin({
uglifyOptions: {
include: /\/regex-for-file/,
minimize: true
}
)}
]
}
Another option is to use uglify-es; this would allow you to get even more explicit by specifying from where to copy the file during build (assuming you might want the file located outside of src/):
npm i -D uglify-es // CopyWebpackPlugin ships w/ Vue's Webpack conf by default
const UglifyJS = require('uglify-es');
const { resolve } = require('path');
const resolveAbs = (dir) => resolve(__dirname, dir);
new CopyWebpackPlugin([
{
from: resolveAbs('../external'),
to: config.build.assetsSubDirectory
},
{
from: resolveAbs('../src/custom-build-path'),
to: config.build.assetsServerDirectory,
transform: (content, path) => UglifyJS.minify(content.toString()).code;
}
]),
To be able to access it during dev, you can include the path of the js file (relative to your Vue src directory) using the resolve.alias option in the config (so you don't need to deal with possibly ridiculous relative paths in your project). Finally, you can look into webpack's HTML plugin docs for info on importing an external index.html file if needed
I would recommend not putting it in static; by default it will not be minified and built if placed in that directory.
Update/edit: Sorry, I saw a 'uglify' and just assumed you wanted uglify js. As long as the script is in your Vue project directory (or otherwise specified in the Webpack config) the file should be minified during build. Vue has pretty smart defaults for Webpack; assuming the iframe is being referenced somewhere in the app i.e. the dependency graph it will be built.
I would like to compile files via Vue CLI 4.5 however I want to omit the asset folders like js,css,img,fonts.
This is how my vue.config.js file looks like right now. I tried to change the publicPath and assetsDir with no luck.
module.exports = {
publicPath:
process.env.NODE_ENV === "production"
? "/newfolder/"
: "/",
assetsDir: "static"
}
Vue is trying to load everything from:
newfolder/static/js
newfolder/static/css
newfolder/static/img
newfolder/static/fonts
Is there a way to dump everything into the static folder in my case?
I'm trying to implement very popular prerender SPA plugin.
Documentation say to add module to webpack.config.js but I don't have such file I have webpack.base.conf.js, webpack.dev.conf.js and webpack.prod.conf.js.
In first there is no plugins array but it is in last two. So I injected in them:
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Required - Routes to render.
routes: [ '/' ],
})
to plugins array and I required it at the top of file. Then I run in command line
> npm run build
> cd dist
> live-server
npm run build created dist folder in root directory and now after I added plugin it additionaly add dist directory in config directory where the webpack.conf files are located. In this new dist folder inside config directory is index.html file which is basically empty html template:
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Not Found</pre>
</body></html>
What I'm doing wrong?
I found my mistake in root component which is App.vue. I didn't have id="app" to my root div.
I am trying to get vue.js source code for production.
I used this command npm run build. I got a dist folder with index.html and a folder named static with all css and js.
When I tried running the index.html in localhost, ie, xampp server I got a blank page .
Is it possible with vue.js to run in xampp.
First create vue.config.js file in project root directory and define base url in it using below code
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/'
}
If you use Vue CLI 3.3 or higher, use
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ?
'/production-sub-path/' :
'/'
}
Replace production-sub-path with your folder name ... eg. http://www.example.com/production-sub-path/ ... and run below command to build the project
npm run build
After finishing the build ... Copy/Upload all files in dist folder to your /production-sub-path/ folder... That's it
For more info checkout the official documentation
https://cli.vuejs.org/guide/deployment.html#general-guidelines
I had this issue before as well. I solved it by making a change to the index.js file in the config folder. Under build, I changed:
assetsPublicPath: '/',
to
assetsPublicPath: '',
and tried npm run build again. I checked the dist file and opened the index.html and it worked, no blank page.
I had the same issue, and I solved the problem by deleting the "/" from the dist/index.html file. I had something like this:
<script src=/js/app.632f4e30.js></script>
And I change it to:
<script src=js/app.632f4e30.js></script>
I created vue.config.js next to the file package.json
With the following content:
module.exports = {
publicPath: ''
}
And run
npm run build
It solved my problem
The following links helped me
https://github.com/vuejs-templates/webpack/issues/310
https://cli.vuejs.org/config/#vue-config-js
Usually when you do a production build the paths that get set in the index.html file prepend a slash in front of it meaning that it will look for the file in the base domain. So im guessing your just trying to open the file in the browser by double clicking the index.html file and having it open in the browser.
Something like
file:///Users/brianvoelker/Desktop/websites/vue-build/docs/index.html
So in that example it is trying to look for files in file:/// and of course the dont exist.
So you can do either two things open the index.html file and remove the slash at the beginning or just know when you deploy that it will work because the files lookup are relative to the base domain.
P.S. If your looking for a cli build tool check out Vue-build.com
Vue.js is a browser side app framework. The server side technology does not matter, unless you are attempting to do server side rendering.
npm run build works perfectly alright, and it creates a minified set of files for manifest.#.js, vendor.#.js and app.#.js
Open the network tab in developer tools of Google Chrome to see what files are getting loaded. If any of the js files are not getting loaded, it is a path configuration that you need to do, so that your server serves the right files.
You may have to tweak the index.html file a bit so that it fully meets your requirements, and move the js files from dist/static folder to your preferred location. The url path does not matter, as long as the app files are served in the right order.
I encountered a similar issue and the above info helped me. However, I found that if you edit the index.js file in the config folder for the VueJS CLI webpack tooling and edit the 'assetsPublicPath:' variable to './' from the default '/' then future builds will find the correct references to the css and js files in the static folder.
I have solved this by adding this code under root directory,
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/'
}
or you can remove first '/' from index.html file that has been created under dist.
example href=/js/chunk-vendors.7a32d01e.js to href=js/chunk-vendors.7a32d01e.js
I had the same situation with a different issue, I used the vuejs-webpack-project project and tried running the output files under an IIS server.
This code in index.html didn't work:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>vuejs-webpack-project</title>
<link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>
<body>
<div id=app />
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js />
<script type=text/javascript src=/static/js/vendor.4ad267b4786a3ebd3327.js />
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js />
</body>
</html>
This code worked(needed to change the closing tags of the script elemet):
<body>
<div id=app />
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.4ad267b4786a3ebd3327.js></script>
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js ></script>
</body>
Open vue.config.js you see the following code.
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
update code to this
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath:''
})