Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to deploy a vue history model project on a cloud server". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Rectification of front-end routing configuration

Import Vue from 'vue'import Router from' vue-router'import HelloWorld from'@ / components/HelloWorld'import lazyImg from'@ / components/lazyImg'Vue.use (Router) export default new Router ({mode: 'history', / / remove #, need to change the route pattern to history base:' / dist/', / / this configuration is also important Otherwise, the page will be blank scrollBehavior: () = > ({y: 0}), routes: [{path:'/ home', name: 'lazyImg', component: lazyImg}]})

Change mode to history to start the npm run dev project and you will find that there is no more'#'to access the address, but when you package and deploy, you will find that resources are inaccessible. Then, you need to do the following server access redirection configuration.

two。 Back-end server configuration

For CVM, I mainly use Apache to deploy, some basic configuration information of my host:

Host brand: billion-speed CVM

The host system is: Ubuntu_16.04_64

2.1 install apache2

Sudo apt update

Sudo apt install apache2

2.2 introduction of rewriting rewrite module

A2enmod rewrite

2.3 upload Project

I upload the packaged dist file to the / var/www/html/vuetest directory:

2.4 add Apache configuration

Enter the profile directory

Vim etc/apache2/apache2.conf

Modify configuration

DocumentRoot / var/www/html/vuetest/dist ServerName 127.0.0.1 RewriteEngine On RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI}-f [OR] RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI}-d RewriteRule ^-[L] RewriteRule ^ index.html

2.5 restart Apache

/ etc/init.d/apache2 restart

Or

Service apache2 restart

2.6 visit the page

The project can be accessed correctly by accessing the page through the host public network ip

This is the end of the content of "how to deploy the vue history model project on the cloud server". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.