nginx中部署vue打包后的静态文件

时间 2019-11-12

标签 nginx 部署 vue 打包静态文件栏目 Nginx 繁體版

原文原文链接

如何在nginx中部署静态资源就不描述了, 请看个人这篇博客 javascript

将vue脚手架项目打包后的静态文件放到nginx上, 发现有个问题, 即url上有#, 怎么去掉这个#呢.html

1 项目中router的mode

路由的mode要为history, 以下List-1.1所示vue

List-1.1java

export default new Router({
  mode: 'history',
  routes: [
    {
...

2 nginx的conf配置

以下List-2.1所示, root放在server下,而不是 location里面; location里面固定写"try_files $uri $uri/ /index.html;"nginx

为何这么写? 请看vue-router官网的说明, 以下图2.1, 看这个连接; 另外将root放到server下, 参考的是这篇文章.vue-router

List-2.1bash

server {
    #端口
    listen       3009;
    server_name  localhost;
    #这里root的值是放置静态资源的那个目录
    root /usr/share/nginx/army/html;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        #下面的这行固定, 就这么写 
        try_files $uri $uri/ /index.html;
    }
...

vue-router官网上有nginx的配置说明, 以下图2.1ide

图2.1ui