目录

1  打包成dist

2 flask配合dist

3  以文件形式打开

---

1  打包成dist

项目路径下输入 npm run build

在项目路径下会出现一个dist

打包后直接双击打开index.html是没有用的

因为你双击打开是file协议，你需要一个http协议

2 flask配合dist

我们可以搞一个flask做后端，起名为serve.py，让其与dist平级

serve.py内容如下

from flask import Flask
from flask import render_template #引入模板插件

app = Flask(__name__,
static_folder='./dist',  #设置静态文件夹目录
template_folder = "./dist",
static_url_path="")  #设置vue编译输出目录dist文件夹，为Flask模板文件目录
@app.route('/')
def index():
    return render_template('index.html',name='index') #使用模板插件，引入index.html。此处会自动Flask模板文件目录寻找index.html文件。
if __name__ == '__main__':
    app.run(
      debug=True,  # 调试打开
      host='0.0.0.0',  # ip
      port=5000,  # 端口
    #   ssl_context='adhoc',  # 默认SSL证书，实现https
      threaded=True,  # 多线程
    )

• 参考 flask打开vue打包后的dist中index.html_flask配合dist_fangjiaji007的博客-CSDN博客

运行起来后端服务，再用浏览器访问端口可以看到页面了

3  以文件形式打开

可以在 vue.config.js 中加入publicPath为空的属性

这样双击就能打开了