钉钉配置java服务预警 钉钉部署服务

Django+Vue+IIS部署+钉钉内网穿透+bat脚本执行-----Vscode初步探索----看这一篇就够了

• 搭建Django+vue项目
• 部署项目到IIS服务器
• 钉钉内网穿透
• 最后

搭建Django+vue项目

需要准备的软件、环境、系统

• Vscode
• python==3.9.5
• django==3.2.4
• mysql==8.0.25
• node
• win10

PS：至于环境和软件怎么安装和配置，自行百度

1.创建虚拟环境
创建一个用于Django项目开发的虚拟环境（为了方便项目的pip包管理），切换到你想创建虚拟环境的文件夹，并在该文件夹打开cmd输入以下命令即可，注意命令最后有一个点：

python -m venv .

2.创建完成后，目录结构如下

-->    myenv  tree
.
|----Include
|----Lib
|    |----site-packages(pip包存放的位置)
|----Scripts

3.激活虚拟环境
进入到Scripts目录，输入命令 activate，激活虚拟环境：

4.安装Django库

虚拟环境激活之后，在虚拟环境下安装Django库。

通过pip安装Django，

查看Django相关文档请去：Django官网地址

(myenv) ➜  pip install Django

安装完成后，可检查一下版本信息，有版本信息则表示安装成功：

(myenv) ➜   pip show django

5.创建Django后端项目

a. 先通过cd 切换到本地项目路径，在项目路径里创建Django项目，采用命令行方式，项目名为django_vue。

(myenv) ➜   django-admin startproject django_vue

b. Django项目创建完成后，目录结构如下：

|--django_vue
|  |--django_vue
|  |  |--__init__.py
|  |  |--asgi.py
|  |  |--settings.py
|  |  |--urls.py
|  |  |--wsgi.py
|  |-- manage.py

c. cd到外层的django_vue文件夹中执行数据库文件（Django默认数据库为db.sqlite3），执行同步过程如下:

(myenv) ➜  python manage.py migrate

d. 启动Django Server，验证默认配置是否正常，下面命令行的意思是，在本地8000端口启动Django Server，打开浏览器，访问http://localhost:8000（或者http://127.0.0.1:8000），一切正常的话，可以见到如下的画面。

(myenv) ➜  python manage.py runserver 8000

e. 将Django数据库更换为Mysql

① 假设前面，大家已经安装配置好了Mysql，直接win+r，输入cmd回车打开cmd，然后输入以下命令然后输入密码，进入到Mysql。

mysql -u root -p

② 创建数据库，数据库取名为django_vue_db_test,并设置字符集utf-8，注意命令行尾部的那个分号，必须要，别漏了。

mysql> CREATE DATABASE django_vue_db_test CHARACTER SET utf8;

③ 安装myslqclient库

(myenv) ➜  pip install mysqlclient

④ 配置内层django_vue文件夹中的settings.py文件，配置Mysql数据库引擎。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'django_vue_db_test',## 此处改为你自己刚才创建的数据库名
        'USER': 'root',
        'PASSWORD': 'xxxxxxx',
        'HOST': '127.0.0.1',
    }
}

⑤ 执行同步操作，将数据迁移到Mysql。

(myenv) ➜  python manage.py migrate

⑥ 验证数据库是否切换成功，进入到Mysql，查看django初始化表是否有生成。

mysql> use django_vue_db_test;
Database changed
mysql> show tables;
+------------------------------+
| Tables_in_django_vue_db_test |
+------------------------------+
| auth_group                   |
| auth_group_permissions       |
| auth_permission              |
| auth_user                    |
| auth_user_groups             |
| auth_user_user_permissions   |
| django_admin_log             |
| django_content_type          |
| django_migrations            |
| django_session               |
+------------------------------+
10 rows in set (0.00 sec)

⑦ 运行Django Server，重新访问http://localhost:8000，若能正常访问，过程没有报错，说明切换数据库成功。

(myenv) ➜  python manage.py runserver 8000

f. 创建Django实战APP项目

① 创建Django APP，在外层django_vue的文件夹下，输入如下命令：

(myenv) ➜  python manage.py startapp api_test

APP创建完成后，目录结构如下所示：

|--api_test
|  |--migrations
|  |  |--__init__.py
|  |-- __init__.py
|  |-- admin.py
|  |-- apps.py
|  |-- models.py
|  |-- tests.py
|  |-- views.py

② 把api_test加入到内层django_vue文件夹下的setting.py文件中的INSTALL_APPS列表里：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'api_test',##此处为自己写的应用名
]

③ 在api_test目录下的models.py中，写一个model如下：

## 注意这两个引入的顺序，必须__future__在最前面，否则会报错，建议直接把这个拷贝到models.py文件里
from __future__ import unicode_literals 
from django.db import models
class Book(models.Model):
    book_name = models.CharField(max_length=128)
    add_time = models.DateTimeField(auto_now_add=True)
 
 
    def __unicode__(self):
        return self.book_name

只有两个字段，书名book_name和添加时间add_time。若没有指定主键Django会自动生成一个自增id作为主键。

④ 在api_test文件夹中的views.py里新增两个接口，一个是show_books返回所有的书籍列表（通过JsonResponse返回能被前端识别的json数据格式），第二个是add_book接受一个get请求，往数据库里添加一条book数据。

from django.shortcuts import render
from django.views.decorators.http import require_http_methods
from django.core import serializers
from django.http import JsonResponse
import json
 
 
from .models import Book
 
 
@require_http_methods(["GET"])
def add_book(request):
    response = {}
    try:
        book = Book(book_name=request.GET.get('book_name'))
        book.save()
        response['msg'] = 'success'
        response['error_num'] = 0
    except  Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1
    return JsonResponse(response)
 
 
@require_http_methods(["GET"])
def show_books(request):
    response = {}
    try:
        books = Book.objects.filter()
        response['list'] = json.loads(serializers.serialize("json", books))
        response['msg'] = 'success'
        response['error_num'] = 0
    except  Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1
    return JsonResponse(response)

可以看到，在ORM的帮助下，接口实际上不需要自己去组织SQL代码。

⑤ 在api_test文件夹中，新增一个urls.py文件，把我们新增的两个接口添加到路由：

from django.conf.urls import url, include
from .views import *
 
 
urlpatterns = [
    url(r'add_book$', add_book, ),
    url(r'show_books$', show_books, ),
]

⑥ 同时，我们还需要将api_test下的urls添加到内层django_vue下的urls中，才能完成路由：

from django.contrib import admin
from django.urls import path
from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView
import api_test.urls
 
 
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include(api_test.urls)),
]

⑦ 在项目外层django_vue的目录下，输入以下命令：

(myenv) ➜  python manage.py makemigrations api_test
(myenv) ➜  python manage.py migrate

⑧ 查询数据库，可以看到book表已经自动创建，Django生成的表名是以应用名称和models.py中的类名组合而成。

⑨ 在外层django_vue的文件夹下，输入命令：

(myenv) ➜  python manage.py runserver 8000

启动服务，通过浏览器输入下面的两个网址测试一下我们刚才写的两个接口，如果如下图所示则表示接口没有问题。

http://127.0.0.1:8000/api/add_book?book_name=啊哈哈哈哈哈
http://127.0.0.1:8000/api/show_books

6. 创建vue.js前端项目

① 有关Vue的模块可以使用node自带的npm包管理器安装。推荐使用淘宝镜像（如果你网络不错，可以忽略）即用cnpm代替npm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

② 先用cnpm安装 vue-cli脚手架工具（vue-cli为官方脚手架工具，能帮你快速搭建项目，说的直白一点就是一个已经有基础框架的demo，然后你自己去填充业务）：

cnpm install -g vue-cli

③ 安装好后，在外层django_vue的文件夹下，新建一个前端工程目录，在创建项目过程中，会有一些与项目相关的选项，按照自己的实际情况来选择即可。

vue-init webpack frontend

④ 安装vue依赖模块

cd frontend
cnpm install
cnpm install  vue-resource
cnpm install element-ui

可以看到，frontend文件夹放在了外层django_vue文件夹下的，在实际开发过程中，完全是可以分开放在不同的地方的。

⑤ 在frontend目录下的src目录下包含有一个入口文件main.js，入口组件APP.vue等。

⑥ 在src/component文件夹下新建一个名为Home.vue组件，通过调用之前的Django写好的API接口，实现添加书籍信息和查看书籍信息的功能。在样式组件上我们使用了饿了么团队推出的element-ui（是一套基于Vue.js封装的功能样式组件），直接贴出Home.vue的代码：

Home.vue文件代码
(直接全部拷贝，具体要去了解element-ui，自行去了解)：

<template>
  <div class="home">
    <el-row display="margin-top:10px">
      <el-input
        v-model="input"
        placeholder="请输入书名"
        style="display:inline-table; width: 30%; float:left"
      ></el-input>
      <el-button
        type="primary"
        @click="addBook()"
        style="float:left; margin: 2px;"
        >新增</el-button
      >
    </el-row>
    <el-row>
      <el-table :data="bookList" style="width: 100%" border>
        <el-table-column prop="id" label="编号" min-width="100">
          <template slot-scope="scope"> {{ scope.row.pk }} </template>
        </el-table-column>
        <el-table-column prop="book_name" label="书名" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.fields.book_name }}
          </template>
        </el-table-column>
        <el-table-column prop="add_time" label="添加时间" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.fields.add_time }}
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      input: "",
      bookList: [],
      baseurl: "http://127.0.0.1:8000" // 内网穿透的时候好修改基地址
    };
  },
  mounted: function() {
    this.showBooks();
  },
  methods: {
    addBook() {
      this.$http
        .get(this.baseurl + "/api/add_book?book_name=" + this.input)
        .then(response => {
          var res = JSON.parse(response.bodyText);
          if (res.error_num === 0) {
            this.showBooks();
          } else {
            this.$message.error("新增书籍失败，请重试");
            console.log(res["msg"]);
          }
        });
    },
    showBooks() {
      this.$http.get(this.baseurl + "/api/show_books").then(response => {
        var res = JSON.parse(response.bodyText);
        console.log(res);
        if (res.error_num === 0) {
          this.bookList = res["list"];
        } else {
          this.$message.error("查询书籍失败");
          console.log(res["msg"]);
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

⑦ 在src/router目录的index.js中，我们把新建的Home组件，配置到vue-router路由中，（直接将下面的代码覆盖掉原来index.js里的代码），具体代码如下：

import Vue from "vue";
import Router from "vue-router";
import Home from "@/components/Home";
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home
    }
  ]
});

⑧ 在src/main.js文件中，导入element-ui和vue-router库。

import Vue from "vue";
import App from "./App";
import router from "./router";
import ElementUI from "element-ui";
import VueResource from "vue-resource";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
Vue.use(VueResource);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

⑨ 在frontend文件夹下打开cmd，输入命令：

npm run dev

如果你开了eslint验证，则会报错如下，此时我们需要修改frontend/eslintignore文件，把src整个目录加进忽略列表，具体代码如下：

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
/src/

修改完成后，再次运行 npm run dev，可以在浏览器打开http://localhost:8080/#/，即可看到前端效果，

这时，你可能会发现没数据，点击没反应，然后打开浏览器控制台（按F12）发现如下报错，不要紧张，只是你忘了开启Django服务了，我们需要重新开启Django服务：

然而，重启完Django服务，你还是会发现，还是不行。。。。那是因为你存在跨域问题，具体报错如下图所示：

这个时候，我们需要通过Django来解决这个问题，也就是我们需要引入Django的第三方包django-cors-headers来解决他：

pip install django-cors-headers

同时，你还需要修改内层django_vue文件夹下的setting.py文件，请注意中间添加的顺序，不可打乱，一定要按照下面代码的顺序哦，不然就报错。。。

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
 
CORS_ORIGIN_ALLOW_ALL = True

然后，重启Django服务器，在前端工程项目frontend目录下运行cmd，输入命令npm run dev，然后我们通过浏览器访问http://localhost:8080/#/，你会发现有数据了，可以点击了，开不开心，哈哈哈哈。

⑩ 在前端工程frontend目录下，输入如下代码，webpack会自动将所有组件，css，js，图片的资源自动打包到dist目录下:

npm run build

接下来，我们就需要整合Django和Vue.js前端了

目前，其实我们已经分别完成了Django后端和Vue前端的开发，但实际上他们其实都是在各自的服务器上的，Django在127.0.0.1:8000上，Vue在127.0.0.1:8080上，我们需要把他们放到一起，此时就需要用到Django的TemplateView，将其指向我们刚才生成的前端工程frontend下的dist文件即可。

找到 内层django_vue文件夹下的urls.py，修改代码如下：

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include(api_test.urls)),
    url(r'^$', TemplateView.as_view(template_name="index.html")),
]

由于我们使用了Django的模板系统，所以需要配置一下模板使Django知道从哪里找到index.html。在 内层django_vue文件夹下的settings.py下，修改代码如下：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS':['frontend/dist'],
        'APP_DIRS':True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

同时，我们还需要配置一下静态文件的搜索路径，还是在 内层django_vue文件夹下的settings.py下，修改代码如下，由于引用了os模块，所以记得在setting。py文件开头引入一下os：

##  如果没引入的话，文件开头记得引入os
## import os

# Add for vuejs
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

配置完成后，我们在外层django_vue目录下输入命令 python manage.py runserver 8000，访问127.0.0.1:8000就能够看到前端页面显示在浏览器上了。此时我们的服务端口就不再是前端的8080了，而是Django服务的8000了，说明我们已经成功通过Django集成了Vue工程。

到此，这个实战模板就搭建好了，前后端分离，由前端框架，如Vue.js来构建实现前端界面，再通过后端框架，如Django来实现API数据提供，两者通过接口进行通讯、相辅相成、最终实现一个完整Web项目。

部署项目到IIS服务器

1、win10自带iis服务管理器，打开 “控制面板” ，选择 “程序和功能” ，进入界面后选择 “启用或关闭Windows功能” ，按照我的图片中项进行勾选。

2、开启之后，你可能不知道在那里打开，如果你是刚安装的，那么你按win键，在菜单最上面就能看见，“最近安装” 点进去就能看到，如果你已经安装过了，那么你可以按win键，然后在 “windows管理工具” 里看到，如下图所示：

3、开启之后，在浏览器输入“http://127.0.0.1”，出现下图表示安装成功：

4、 安装python3到服务器上，如果你是本地IIS，不是远程服务器上的话，这步其实可以不用管，因为你肯定已经安装过python了。如果没安装，那自行百度吧。

5、在部署项目的时候需要注意我们项目里引用的pip包也在服务器下，因为我们之前是在虚拟环境下进行的Django项目开发，所以所应用到的pip包都在虚拟环境下，为了在服务器中安装pip包，我们需要项目环境里的pip包信息和依赖软件打包一下导出到requirement.txt(取名随意)， 执行如下命令行，具体执行效果如下：

(myenv) ➜  pip freeze > requirement.txt

6、然后切换到服务器的python环境下，我的本地python就是我本地服务器的python，所以只需要在项目路径打开cmd运行一下如下命令行即可：

(myenv) ➜  pip install -r requirement.txt

如上图所示，因为我已经安装好了，所以第二遍安装就会提示你已经存在了，如果你之前在服务器上没安装过，他会正常安装，如果中途出现奇奇怪怪的报错，可以多试几次，或者切换一下pip包源再试一下，如果还是报错，确定项目是否用到那个包，如果没用到可以在requirement.txt直接删除掉那条包的信息，然后重新执行安装。

7、安装wfastcgi
在windows下，我们是没办法使用uwsgi的，但是我们可以使用wfastcgi替代他，打开cmd窗口，输入以下命令安装wfastcgi：

pip install wfastcgi

8、安装成功后，通过下面命令启动它：

wfastcgi-enable

9、如果中途出现什么权限不足之类的报错，直接用管理员模式下的cmd再试一下上面的代码就可以了。

我这里已经启动过，第一次启动的话，它会把python路径和wfastcgi的路径显示出来，大家把这个路径复制一下，或者你没记住，你也可以像我这样重新再启动一次就能看见划红线的路径就是之前的路径。

10、在iis里添加项目网站
打开iis服务，右键网站，选择添加网站，就可以看到让你配置网站的属性，就按照我这个设置进行，配置里的那个物理路径选择你搭建的django项目目录即可，端口选择8003。

11、配置权限，右键你刚才建立的网站，菜单有个 编辑权限，点进去你会看到有个“安全”，然后按照下图所示操作，记得点“确定”和“应用”。

12、点击创建好的网站，选择“目录浏览”，然后打开功能，选择 “启用”。

13、接下来我们开始配置我们的web项目，

在Django项目的根目录新建一个web.config配置文件，如果有的话，就直接修改文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
    <configuration>
        <system.webServer>
            <handlers>
                <add name="Python FastCGI" 
                     path="*" 
                     verb="*" 
                     modules="FastCgiModule" 
                     scriptProcessor="c:\python39\python.exe|c:\python39\lib\site-packages\wfastcgi.py" 
                     resourceType="Unspecified" 
                     requireAccess="Script"/>
            </handlers>
        </system.webServer>
        <appSettings>
            <add key="WSGI_HANDLER" value="django.core.wsgi.get_wsgi_application()" />
            <add key="PYTHONPATH" value="F:\djangovuetest\django_vue\django_vue" />
            <add key="DJANGO_SETTINGS_MODULE" value="django_vue.settings" />
        </appSettings>
    </configuration>

我打红框的地方，是需要调整成你自己项目的路径以及项目名称的。

注意 ：直接按照我的复制即可，但下面三个需要修改

①：scriptProcessor修改为你之前启动wfastcgi时保存的路经，添加即可

②：PYTHONPATH修改为项目的路经，这里注意要添加到有settings.py那个文件的目录

③：DJANGO_SETTING_MODULE修改为：项目名.settings

14、 为了让我们的静态资源可以正常显示在网页上，我们需要在django_vue项目的frontend的dist的static目录下新建一个web.config。
,输入以下内容

<?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
      <!-- this configuration overrides the FastCGI handler to let IIS serve the static files -->
      <handlers>
        <clear/>
   <add name="StaticFile" path="*" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
     </handlers>
   </system.webServer>
</configuration>

15、然后我们在iis右键这个网站，点击添加 添加虚拟目录… 就可以了，按照你自己的项目位置添加static就可以了，最后点击确定即可 ，如下图所示：

16、到此，我们打开浏览器输入http://127.0.0.1:8003,就可以看到我们的网页了。但是此时只能实现内网访问，或者说只能在你的局域网内访问，要实现外网访问，要么你把这个网站部署到云服务器上（花钱买，也有免费的，但是很辣鸡。。。），要么你内网穿透，把自己的电脑当主机服务器。而我们在调试阶段可以用内网穿透来实现。添加链接描述

PS：其实在前端项目frontend文件夹下的node_modules其实在你运行了 npm run build之后可以不用放到服务器上，太占空间了，以后熟悉了可以只把frontend下的dist文件夹部署到服务器上就可以了。

钉钉内网穿透

众所周知，目前市场上比较热门的三种内网穿透：钉钉内网穿透，花生壳内网穿透，natapp内网穿透。

反正我选钉钉，其余两个主要是要钱，，，太穷了，natapp和花生壳也有免费的，但是natapp要你实名信息（真实姓名+身份证），花生壳免费的他不提供http，要开通需要6RMB？（那我要你干啥，吐了）。。。

下面我就讲一下钉钉的内网穿透实现，你感兴趣的话，自己可以去百度一下另外两个。

1、我们需要去钉钉github内网穿透项目下载这个项目

2、解压你下载的文件到F盘（我的项目是在F盘下的，方便点使用，你随意）：

3、点击windows_64，然后在这个文件夹里，新建一个hahaha.txt文件，拷贝下面的代码，

注意： 你会看到我下面的代码里有一段

“****************************************************”，

这个地方你需要调整成你自己的名字，建议设置的名字偏僻一点，就像我下面图中的红框里的一样，这样你不会和别人的网址冲突，导致你的无法访问，红框后面的那个8003表示你想要映射的内网端口，因为我们的网站时部署在8003端口上的，所以这里映射到8003端口上，有个红框里面是你下载的钉钉内网穿透工具所在的目录地址，在地址栏拷一下就好了。

cmd /k "cd /d F:\ding-pierced\windows_64&&ding -config=ding.cfg -subdomain=**************** 8003"

4、保存好了之后，把这个hahaha.txt文件改一下后缀，改成 hahaha.bat，变成批处理文件，方便一些，不用每次都打开cmd然后手动输入。。。然后点击该文件运行即可。到此你的内网穿透就完成了，浏览器输入，cmd里面的那个地址，只需要拷前面那部分就行，别憨憨的把后面的内网地址也拷了。

http://haohaohaohaohaohaohao.vaiwan.com。

5、但是，你以为结束了？太天真了。。。外网并不能访问你的网站。。。而且，他还会看到一个错误，如下图所示：

导致这个错误的原因，上面也说得很明白了，你没有允许他访问。。。气不气，不过问题不大，我们进入到 我下面那个红框框的位置，找到那个作死的get_host函数给他一个如下的操作就可以了：

在get_host函数里的allowed_hosts参数里加一个 “.vaiwan.com”, 然后 重启服务器 就可以了，怎么重启服务器呢，如下图所示，打开iis管理器：

然后你再重新访问刚才的那个网址，他就可以了。。。大功告成！

最后

1、但是，其实，我们现在这个网站极其不安全，我们需要稍微调整一下我们的django_vue项目目录下的settings.py文件，修改一下里面的两项，其中那个网址（haohaohaohaohaohaohao.vaiwan.com）你需要换成你自己的，如下图所示：

DEBUG = False

ALLOWED_HOSTS = ["haohaohaohaohaohaohao.vaiwan.com"]

2、然而 这么改完之后，你会发现你的网站有页面但是没数据而且点不了了。。。这时，我们对着浏览器按下F12，你来到了浏览器的控制台，F5刷新一下页面你就会看到如下图所示的问题。

这个问题就是在你内网穿透之后，同时你关闭了Django的调试模式（DEBUG = False）导致的，现在我们需要改一下我们前端的代码来修正他，让它恢复正常。我们进入到django_vue->frontend->src->components->Home.vue，来到我们之前写的前端的一个组件页面，修改里面的一个参数，baseurl改成你内网穿透的网址

我的是http://haohaohaohaohaohaohao.vaiwan.com）

然后保存文件，在django_vue->frontend文件夹中打开cmd运行，npm run build

这时候，我们dist目录下的web.config其实被系统给删掉了，因为，执行 npm run build命令会导致django_vue->frontend->dist目录先删除所有文件然后再重新生成新的文件，所以我们需要重新配置static文件夹下的web.config。这个在前面已经介绍过了，可以回头查看一下，在（ 部署项目到IIS服务器 的第12步，自行查看）。

然后重启服务器！

首先恭喜一下你自己，你居然耐得住看完了我的全篇文章。

既然这样，你都这么帅了，都这么好看了，不介意给我点小钱吧，多少随意，看你心情。

如果你一步一步按照我的操作来的，基本没问题，如果有问题，可以给我留言，随缘回答。