Heroku Practice: How to successfully deploy Vue.js front-end content to Heroku

Vue.js Scaffolding

• First, use Vue's scaffolding to create a vue project, which I use in practice Vue2, so follow the steps below to create
• Vue CLI can create new projects of Vue 2 or Vue 3. You can choose the version of Vue you want when creating a new project.
• Here are the steps to create a Vue 2 project using Vue CLI:

Install Vue CLI (if you haven't already):

	npm install -g @vue/cli

• This will globally install the latest version of Vue CLI.

create new project

vue create my-project

• Replace my-projectwith your desired project name.

• Choose Vue 2a preset: After running vue createthe command, Vue CLI will let you choose a preset. You can choose the "Default (Vue 2)" preset to create a Vue 2 project. If you need a more complex configuration, such as including Vuex or Vue Router, you can select "Manually select features" and manually select Vue 2 and other options you need.

• Then it's time to develop your project

Heroku deploys Vue2

• This article is applicable to the situation: you use to Vuebuild the front-end, and another framework (Django) to build the back-end, and you want to deploy the front-end and back-end to two different Heroku projects (because the Django-based project Heroku deployment is very troublesome, so I will deploy separately), then you need to deploy it Vueseparately
• Vue2What is created is just a front-end content. In order to successfully deploy, we need to Vueadd a file to this project server.js. You can think of it as Herokuan entity deployed on . This server.jswill allow people who visit this application to get the front-end static page when it is running.
• The following is an server.jsexample of

project directory

.
├── Procfile
├── README.md
├── babel.config.js
├── index.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── server.js
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── http.js
│   ├── main.js
│   ├── router
│   ├── test.html
│   ├── test.js
│   └── views
└── vue.config.js

• Except server.jsother is my original file directory
• server.jsCreate a new file directly under the root directory

server.js

• Doing this step actually creates a static server, you can use Node.jsthe expresslibrary to create a simple server for your Vue application
• Install express:

  npm install express --save
  

const express = require('express');
const serveStatic = require('serve-static');
const path = require('path');

const app = express();

app.use('/', serveStatic(path.join(__dirname, '/dist')));

const port = process.env.PORT || 8080;
app.listen(port);

console.log('Listening on port: ' + port);

• Because Vuethe static resources of the project created by scaffolding are placed /distunder the directory, although you can see it from my file directory, publicbut don't think that this is where the static resources are stored, and don't write app.use('/', serveStatic(path.join(__dirname, '/dist')));asapp.use('/', serveStatic(path.join(__dirname, 'public')));

package.json

• This file usually defines some script(scripts), that is, start your server or other behaviors with some short commands

"scripts": {
    
    
    "start": "node server.js",
    "build": "vue-cli-service build"
}

Create Procfile

• Procfileis an extension-less text file in which you define your application's process type and the command to run. This way Heroku knows how to run your app. ProcfileCreate and add the following in the project root directory :

web: npm run start

Follow heroku's guide to initialize git and submit code

• Create a new heroku app
  
• Submit the code following Deploythe guide in
  
  

possible problem

• If the Heroku deployment succeeds without displaying any pages, and there are no error messages, it could be due to several reasons. Here are some possible problems and corresponding solutions:

• Check your build script: Make sure you package.jsonhave the correct build command defined in the file, usually build: "vue-cli-service build". When you push to Heroku, Heroku will automatically run this build command to create your Vue.js app.

• Confirm server.js settings: Check that your server.jsfile path is set correctly for static files. If you created the project using Vue CLI, the generated static files will be located distin the directory. You need to make sure the express.static middleware points to this directory. For example:

• Make sure the Procfile is set up correctly: Procfilethe file that tells Heroku how to launch your application. Make sure the Procfile content is correct and the web process type points to the correct start command. For example, if you use server.jsa file to start the server, it Procfileshould contain the following:

  web: node server.js
  

• Check the Heroku logs: Even if Heroku doesn't show errors directly on the app page, there may be more information in its logs. Run heroku logs --tailthe command to view the latest log information and newly generated logs.