Deploy Your First Vue App – Client Side Development

Add a Directory to Your Workspace

Add a directory named app1 to your public_html directory.

Create a Vue Project Using the Vue CLI

Open a terminal screen in VSC and change the working directory to the projects directory. Then issue the following command to create a new Vue project using the Vue CLI.

vue create app1

Select the following options at the Vue CLI prompts:

‘Manually select features’
Deselect the linter and leave all other defaults
Version 3.x
‘In dedicated config files’
N (save for future projects)

Update vue.config.js

Since public_html will contain the code for our website, we can say that public_html is the root directory of our website. By default, Vue expects all apps to be deployed at the root of a domain. We’re, however, going to copy app1’s production code to public_html/app1/ rather than at the root of the site.

To inform Vue that we’re deploying the app to the app1 directory we need to modify the vue.config.js file as follows:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'development'
    ? '/'
    : '/app1/'
})

Run the Vue Project on the Live Server

On the command line, change the working directory to projects/app1/. Then run the “serve” script defined in package.json by issuing the following command in the terminal.

npm run serve

When complete, hover your cursor over http://localhost:8080/ and click Follow Link. This will load the app in a browser. It’s a simple web app that displays some Vue links.

Build the Project

Terminate the Live Server by pressing CTRL + c in the terminal. Next, run the following command in the terminal to build a production ready version of the app.

npm run build

When the command is run, Vue consilidates the project code into a few files and places them in a directory named /dist. Notice that there is a file in /dist named index.html. This is the web app’s main page.

Move the Production Code

Cut all the files and subdirectories in projects/app1/dist/ and paste them in public_html/app1/.

Add a Link to the App

Open public_html/index.html and add a link to public_html/app1/index.html.