vue应用在nginx非根目录下的部署

一般部署node-moudle的vue应用在nginx上，直接将dist中打包好的文件部署在根目录'/'下并写好路由就可以正常运转了，但是非根目录下还要对webpack的打包路径、静态资源路径做一些修改，要不然服务器就找不到文件了= =现在假设我们需要在服务器的/doge路径下部署vue应用，需要经过以下几步配置~1.项目router配置如果项目有配置router，在/router/ind...

PaulXerxes

3459人浏览 · 2020-05-05 14:05:14

PaulXerxes · 2020-05-05 14:05:14 发布

一般部署node-moudle的vue应用在nginx上，直接将dist中打包好的文件部署在根目录'/'下并写好路由就可以正常运转了，但是非根目录下还要对webpack的打包路径、静态资源路径做一些修改，要不然服务器就找不到文件了= =
在这里插入图片描述
现在假设我们需要在服务器的/doge路径下部署vue应用，需要经过以下几步配置~

1.项目router配置

如果项目有配置router，在/router/index.js下设置router，这里一是要修改router模式为history，另一个就是修改base地址为要访问的/doge的地址，注意前后都有斜线。

export default new Router({
  base: '/doge/',
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'admin',
      component: admin
    }
  ]
})

2.修改build下静态资源路径前缀

找到config/index.js修改其中build的公共路径配置：

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: './static',
    assetsPublicPath: '/doge/',//修改这里
    ...
    }

3.静态资源路径修改

如果在应用中有静态资源的加载，需要修改相应的路径，常见的有：

html中静态资源加载

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="Shortcut Icon" href="/static/logo.ico" type="image/x-icon" />
  <title>dooooooooooge</title>
</head>

修改Ico加载路径

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="Shortcut Icon" href="/doge/static/logo.ico" type="image/x-icon" />
  <title>dooooooooooge</title>
</head>

js需要加载本地静态数据的情况：

$.get('../static/xia.json', function (data) {
//一些操作
})

修改文件路径

$.get('/doge/static/xia.json', function (data) {
//一些操作
})

4.nginx服务器配置

4.1 找到配置文件位置

在登录服务器后，命令行执行操作

ps -ef | grep nginx

返回结果1：

[root@localhost /data/nginx/logs 09:47:00&&23]#ps -ef | grep nginx
root 1734 1 0 Oct28 ? 00:00:00 nginx: master process /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

那么/usr/local/nginx/conf/nginx.conf就是配置文件了

返回结果2

[root@VM_0_5_centos /]# ps -ef | grep nginx
root     15877     1  0 May04 ?        00:00:00 nginx: master process /usr/sbin/nginx -c /etc/nginx/nginx.conf
nginx    15878 15877  0 May04 ?        00:00:00 nginx: worker process
root     19170 19090  0 13:47 pts/0    00:00:00 grep --color=auto nginx

我是这种/usr和/etc分开的情况，由于nginx有默认路径，把配置信息写在/etc/nginx/conf.d中的default文件中

4.2 修改配置文件

在server下加上/doge路径

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;i
    location / {
        root   /home/index;
        index  index.html index.htm;
    }

    location /doge {
        alias  /home/doge;
        index index.html index.htm;
    }

4.3重启nginx服务器

sudo systemctl restart nginx

5.文件部署

将项目中dist下的index.html和static文件夹一起放入doge文件夹下，将文件夹上传至服务器/home下，完成部署，大功告成~

参考资料：

前期准备
github托管
 总体流程
 项目打包
 cenos7中的nginx安装方法
配置ngnix文件
查找配置文件位置
 配置文件没有server
server修改
 非根目录下的路径问题
 服务器之间迁移

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^