ubuntu 20.04.4+uWSGI+Nginx安装部署Django+Vue的web前后端全过程记录(2-Vue)

ubuntu 20.04.4+uWSGI+Nginx安装部署Django+Vue的web前后端全过程记录(1-Django)

ubuntu 20.04.4+uWSGI+Nginx安装部署Django+Vue的web前后端全过程记录(3-实现局域网通过本机IP地址加端口号访问本地虚拟机的web项目)

Vue项目ubuntu+vuecli部署

vuecli编译

完成之后在项目下生成如下dist文件

Xftp上传到ubuntu的自定文件夹中

nginx配置

检查之前的nginx配置文件是否有语法错误，用如下命令

nginx -t
1

报错了，应该是没有权限

试试sudo

sudo nginx -t
1

成功运行

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

nginx加入如下配置

	#	Vue configuration
	server {
	listen   8080;     #配置访问时的端口号
	server_name  192.168.80.128;
	charset     utf-8;
	client_max_body_size  75M;  #影响post文件的最大大小

	location / {          
		root /home/andy/Documents/photovoltaic/photovoltaichtml;
		index index.html;
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12

传入ubuntu，重启nginx。部署完成(如果不行，再重启uWSGi)

service nginx restart
1

复制当前nginx.conf文件到/etc中(在使用finashell传文件时，应该是权限问题，但是是root用户啊。不能直接传入/etc/nginx/nginx.conf。我在这复制进去成功了)

sudo cp -i nginx.conf /etc/nginx/nginx.conf
1

uWSGi基本命令

启动

uwsgi --ini pvsite_uwsgi.ini 
1

设置后台运行-d

uwsgi -d --ini pvsite_uwsgi.ini
1

重启

uwsgi --reload xxx.pid  //需要在ini中配置uWSGi运行进程的pid保存路径
1

停止

uwsgi --stop xxx.pid	//需要在ini中配置uWSGi运行进程的pid保存路径
1

终极停止

sudo pkill -f uwsgi -9
1

sudo 代表使用管理员权限执行命令。可以省略
kill -9中，9代表的就是9号信号，带有强制执行的意思，它告诉进程：“无论你现在在做什么，立刻停止”
1
2

解决无法获取后台api；vue文件信息暴露在外(关闭sources与devtools)

由于之前一直用的是本地的回环地址，所以这样肯定是无法获取到部署后的Django数据的。

修改axios的baseURL：

如下图所示，浏览器可以查看到我们的项目文件，这可不兴看啊。

前端文件中vue.config.js中添加如下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  // 不让其他人看源码
  productionSourceMap: false,
})
1
2
3
4
5
6
7

改完变成这样了，比原来好一些，后续在寻求更好的解决方法吧

解决其他小问题

给项目换浏览器小图标，vue项目设置浏览器标题title及图标。

动态设置标题：通过路由导航守卫设置，使用Vue-Router的beforeEach拦截
不错的方法

/* 第一步：在router中的index.js路由下设置mate属性*/ 
routes: [{
      path: '/',
      name: 'home',
      component: () => import('@/pages/home/index'),
      meta:{
        keepAlive: true
      }
    },
    {
      path: '/person/auth,
      name: 'personAuth',
      component: () => import('@/pages/person/auth),
      meta:{
        title: '功能授权',
        keepAlive: false
      }
    }
  ]
 
/* 第二步：在路由守卫router.beforeEach中设置如下代码 */
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

解决路由守卫：vue-router.esm.js?68cf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/search”.

在router目录下添加如下代码

// src/router/index.js
Vue.use(Router)  
const router = new Router({
  routes
})
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

1
2
3
4
5
6
7
8
9
10