How to publish a Vue.js project to your hosting account

Vue is a progressive framework for building user interfaces.

If you simply include the Vue.js library in your application's index.html file like this

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

please publish your application as normal, since all related .js files will be download to the browser and work properly.

While if you are using Vue CLI along with a backend framework that handles static assets as part of its deployment, all you need to do is make sure Vue CLI generates the built files in the correct location, and then follow the deployment instruction.

1. create a new Vue.js project locally

vue create hello-world

2. run the application in the development environment

By default, it will start the development server at

- Local: http://localhost:8083/

cd hello-world
npm run serve

3. design your application, test it with the development server, prepare to deploy the application

this will package all project files and related modules to a new dist folder under the project directory

npm run build

4. navigate to the dist directory, archive all the folders and files under the path to .zip file

5. upload the archived .zip file to your hosting account via File Manager or FTP client

6. unzip the .zip file to the target site path

7. access your site URL to check the application

8. if you are using Vue Router in history mode, a simple static file server will fail

For example, if you used Vue Router with a route for /todos/42, the dev server has been configured to respond to localhost:8083/todos/42 properly, but a simple static server serving a production build will respond with a 404 instead

To fix that, you will need to configure your production server to fallback to index.html for any requests that do not match a static file. Here is a sample to make the rewrite in the site's root web.config file

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="SPA Routes" stopProcessing="true">
                <!-- match everything by default -->
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <!-- unless its a file -->
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <!-- or a directory -->
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    <!-- or is under the /api directory -->
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    <!-- list other routes or route prefixes here if you need to handle them server side -->
                </conditions>
                <!-- rewrite it to /index.html -->
                <action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

9. access your site URL again to make sure everything works

Article ID: 2170, Created: May 21, 2021 at 2:52 AM, Modified: June 3, 2021 at 2:02 AM