I recently finished creating a Vue app that I wish to deploy on the internet. However, I can only open the project using node and running npm run dev. If I double click on the index.html file, I just see a blank page. How may I deploy my website so that the browser can render my Vue app?
If you used the vue-cli to generate the project, you should be able to run npm run build and get a minified, single .js file.
See here: http://vuejs-templates.github.io/webpack/commands.html
This will give you a dist folder with index.html and build.js. You should be able to open the html file and see your app.
Hoping it's usefull for someone, still:
Using #vue/cli 3, I had a simular result when copiing the dist to my localhost/test.
The build assumed all js and css file relative to the root while I was putting them relative to a subfolder 'test'.
adding the publicPath : "" did the trick to get rid of the preceeding '/'
in vue.config.js I added : ( using proxy for dev with apache/php )
module.exports = {
devServer: {
proxy: 'http://localhost:80/proxy'
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
output: {
publicPath : "" // only for prod
}
} else { // dev
// org, no changes
}
}
}
See also
https://alligator.io/vuejs/using-new-vue-cli-3/
https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#inspecting-the-projects-webpack-config
Related
I’m experiencing problems deploying a Vue JS app built using the Webpack CLi to work.
If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.
I want deploy VueJS App to this url :
https://event.domain.net/webinar
I have added publicPath in vue.config.js :
var path = require(‘path’)
module.exports = {
publicPath: ‘./’
}
But only the css and js folders point to the path /webinar.
For assets, fonts and others still point to the subdomain https://event.domain.net.
CSS and JS point to path /webinar
Asset, fonts still point to subdomain https://event.domain.net/
Console
use value of publicPath as /webinar that should work.
More details are here https://cli.vuejs.org/config/#publicpath
you can configure publicPath even based on environment.
Sagar Rabadiya pointed you to the right link:
create a file called vue.config.js in the project root (where your package.json is located).
prompt the following code snippet inside:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}
and save the file.
Open a terminal and navigate to your project, then run npm run build to generate a production build from it.
As soon as the production build has been generated, copy the contents from it and paste it in the sub-directory you created in the root folder. For example, if you use Apache, the default root directory is the htdocs folder. I've also created a virtual host on the server, maybe you also need to do this.
Open the browser and type the address where your sub-directory lives. For example: http://your-server-url:your-port/your-sub-directory/ Your should see your app now.
When generating a new project using Vue CLI v.4.0.0 everything is bootstrapped nicely with an index.html file, a couple of .vue files, several configuration files and finally a main.js file. But since the HTML-file does not reference main.js I wonder how Vue knows to look for main.js. Is it implicitly understood by Vue or is there a binding somewhere that tells Vue to look for a file named "main.js"?
Vue CLI runs on Webpack.
Webpack requires an entry file.
You can overwrite the entry file by creating a vue.config.js file at the root of your project and adding:
module.exports = {
configureWebpack: {
entry: {
main: './src/overwritten-main-file.js'
}
}
}
See the Vue.js Configuration Reference for more info
I am struggling with the deployment of a Vuejs front-end on my local IIS.
I would like to have my app deployed into a folder named FE_STB which is a sub-directory within my C:\inetpub\wwwroot folder.
Ideally, the URL to access the front-end would be http://localhost/FE_STB/.
In order to do so, I tried the following in vue.config.js:
module.exports = {
// Used to build the path for the css, js
baseUrl: process.env.NODE_ENV === 'production'
? '/FE_STB/'
: '/',
// The folder where the app will be built in the project directory instead of the default dist folder
// outputDir: 'Vue',
};
running npm run build generates an index.html, a favicon.ico, my img, js, css and fonts folders.
The index.html contains link tags such as (<link href=/FE_STB/css/chunk-05c5.672f5bfa.css />) and i thought it was going in the good direction.
However, it keeps returning a
404 not found error
when i try to access http://localhost/FE_STB/.
On the other hand, If I copy only the index.html into the root directory of my IIS installation (wwwroot) instead of the FE_STB subdirectory, and check the http://localhost/ URL, my app appears correctly.
However, when I start browsing the app and hit the refresh button, I get an error. For example, If I am on http://localhost/about/ on my app and refresh it with F5, I will get a 404 error as it’s looking for C:\inetpub\wwwroot\about\ directory which doesn’t exist obviously.
I also tried the web.config and the IISrewrite solutions as explained on the vuejs website or tried to add:
const router = new VueRouter({
mode: 'history',
// To define sub-directory folder for the deployment
base: 'FE_STB',
routes,
linkActiveClass: 'active',
scrollBehavior(to, from, savedPosition) {
return savedPosition || { x: 0, y: 0 };
},
});
in my router.js but it doesn’t change anything.
Any tips or directions would be really helpful.
Thank you
S.
I'm doing a webpage with Vue (Vue-bootstrap) and I'm having problems to make it works. I'm uploading the content of the dist folder after using npm run build, the project was started using `vue init bootstrap-vue/webpack my-project. I've tried to add a vue.config.js file with the next information:
module.exports = {
baseUrl: './',
//...
}
I've try several times adding this in different folders before build it but I can't make it work.
The result just show the footer, it is in:
http://thegraph.es/Citython/
and the code without this vue.config.js is in the next link:
https://github.com/MGijon/Citython/tree/master/web
I use several Node/Express modules in my app, and everything works fine for every module as long as I do const module = require('module');. I don't need to define a static path for these modules as app.use(express.static(path.join(__dirname, 'public')));.
However, for the sweetalert module, if I define in my layout.pug (base pug file) script(src="/node_modules/sweetalert/dist/sweetalert.min.js"), I get a 404 Error (not found) unless I include in app.js the following static path: app.use("/node_modules", express.static(__dirname + "/node_modules"));.
My question is: is this the normal behaviour or is it something I'm not doing right? (I'm kinda confused why I have to define a static path just for one of several modules I use.
Here's whats going on:
app.use(express.static(path.join(__dirname, 'public'))); is declaring that the public directory is accessible to the browser. You should put all your front end resources in that folder. This will help separate what can be accessed from the server and what can be accessed from the client.
When you reference script(src="/node_modules/sweetalert/dist/sweetalert.min.js") the browser throws a 404 because that file is not located in the public directory, therefore off limits to the browser.
Adding this line app.use("/node_modules", express.static(__dirname + "/node_modules")); "fixes" your issue but now exposes all your node_modules to the browser. This probably isn't a good idea and I'm sure a security expert could elaborate why this shouldn't be done.
How I would resolve this issue: Go through your .pug code and look at any resources your front end requires. Then copy them over to the public folder and fix your references to use the copy of the resource.
Here's an example of a script I use to move resources from the node_module directory to a public/assets directory:
build.js:
const path = require('path');
var fs = require('fs');
const ASSETS = [
'jquery/dist/jquery.min.js',
'sweetalert/dist/sweetalert.min.js'
];
if (!fs.existsSync('./public/assets')){
fs.mkdirSync('./public/assets');
}
ASSETS.map(asset => {
let filename = asset.substring(asset.lastIndexOf("/") + 1);
let from = path.resolve(__dirname, `./node_modules/${asset}`)
let to = path.resolve(__dirname, `./public/assets/${filename}`)
if (fs.existsSync(from)) {
fs.createReadStream(from).pipe(fs.createWriteStream(to));
} else {
console.log(`${from} does not exist.\nUpdate the build.js script with the correct file paths.`)
process.exit(1)
}
});
then I update my package.json to include this in the scripts:
package.json:
"scripts": {
"build": "node ./build.js || true",
"start": "node ./bin/www"
}
then in any of my views pages I reference the resource by using the new path
random.pug:
script(src="/assets/jquery.min.js")
script(src="/assets/sweetalert.min.js")
Finally before you deploy your app you now must run the following command:
npm run build then npm start
You will only need to run the build command if your front end resources change. So if you only ever use sweetalert.min.js you will only need to run the build the first time you run your app. If later on you add another resource aNewResource.js you will need to update the build.js file and run npm run build again.