局域网内共享使用vscode打包的VUE网页，前端VUE+后端FLASK结合

这里使用的是后端是FLASK简单建立的后端，后端包括一些验证码的提供、数据库内容查询等，前端是VUE打包后的index.html网页。

        在这里，VUE打包就不详细展开了，网页使用vue-element-simple的开源模板二次开发，打包时，注意设置axios.defaults.baseURL的生产环境下的Axios的连接自己数据库主机ip地址（即一般是自己电脑的ip地址），这里是process.env.BASE_API。

 

         然后，运行打包命令，这里是“yarn build” 

         接着，在根目录下，找到dist文件夹，把如下两个文件拷贝到FLASK的templates文件夹下，若自己的flask后端没有这个templates文件夹，自己新建一个就行。

app = Flask(__name__,
            static_folder='./templates/static',  # 设置静态文件夹目录
            template_folder="./templates")  # 设置vue编译输出目录dist文件夹，为Flask模板文件目录

 

         然后，flask里面注意设置一下所使用的网页模板为刚才打包的网页，如下，设置静态资源地址是刚刚打包后的static文件夹里面的js文件等，index.html入口地址是刚刚放网页的templates文件夹（或者自己新建的文件夹的名称）；注意地址写相对路径即可， 路径千万不要写错哦...

        并设置index跳转，即@app.route("/")

app = Flask(__name__,
            static_folder='./templates/static',  # 设置静态文件夹目录
            template_folder="./templates")  # 设置vue编译输出目录dist文件夹，为Flask模板文件目录

@app.route('/')
def index():
    return render_template('index.html',name='index') #使用模板插件，引入index.html。此处会自动Flask模板文件目录寻找index.html文件。

​​​​​​​

 

到此，基本完成了所有设置，在“地址栏”输入cmd，打开命令行窗口，或者按住shift+鼠标右键，打开Powershell的蓝色命令行窗口。打开后的cmd窗口中，输入“Python app.py”运行你的Flask代码（这里我的FLASK的py文件名叫“app.py”）即可。

 

 

 看到上面“Running on http://192.XXX.X.XX:XX/”(Press CTRL+C to quit)了吗，复制红色的这段ip地址，在自己浏览器中打开即可。