vue using npm run build package can generate a dist file directly open the index.html is not enough, we need to put it into a container
1. express-generator mounted generator.
npm install express-generator -g
2. find a place to create an express project.
express name // name is the name of the project
3. Enter the project directory, related to the installation project dependencies.
cd name
npm install
4. Copy all files are packaged generated dist folder to express the project folder, and then run npm start to start express project.
5. Enter localhost in the browser: 3000 (3000 is set up their own port number) on the line.
Then can see the page, but we may appear to refresh the page 404, I was nginx configuration problem, the solution is as follows
If this problem can not refer to other articles
Vue project on-line refresh error 404 issue (apache, nginx, tomcat
After Vue build packaged, refresh the page 404 Solutions
Solution: Set history mode and configure nginx
vue-router default hash mode - use the URL to simulate a complete hash of the URL, so when the URL changes, the page will not reload.
If you do not want to hash ugly, we can use history routing mode, this model take advantage of history.pushState API URL to complete the jump without having to reload the page.
const router = new VueRouter({
mode: 'history',
routes: [...]
})This model also requires background support, because we are a single page because the client application, if the background is not correctly configured, when a user browses will return 404, configured nginx
server {
listen 80;
server_name localhost;
index index.html;
root /root/dist;
location / {
root /root/dist;
try_files $uri $uri/ /index.html =404;
}
}