将VUE打包后网页布置在FLASK上

简介

由于在开发项目过程中前端用npm run serve 启动vue项目，后端flask，涉及了两个端口后，后期将vue项目打包后的文件让flask进行渲染。

vue.congifg.js文件的修改

参考网上相关的配置，下面三个路径是必须设置的，并依据flask的路径要求，进行文件名字的修改。

module.exports = {
      // 公共路径(必须有的)
      publicPath: "./",
      // // 输出文件目录 与 flask的 template 同名 可以直接替换
      outputDir: "templates",
      // // 静态资源存放的文件夹(相对于ouputDir)
      assetsDir: "static",//将js 和 css 相关的静态资源存放
      // eslint-loader 是否在保存的时候检查(果断不用，这玩意儿我都没装)
      // lintOnSave:false,
      // 我用的only，打包后小些
      // compiler: false,
     // productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小，加速构建
      // css相关配置(我暂时没用到)
      // css: {
      // 是否使用css分离插件 ExtractTextPlugin
      // extract: true,
      // 开启 CSS source maps?
      // sourceMap: false,
      // css预设器配置项
      // loaderOptions: {},
      // 启用 CSS modules for all css / pre-processor files.
      // modules: false
      // },
      // webpack-dev-server 相关配置
        
    //vue-pdf解决方法
    chainWebpack: (config) => {
        config.module
          .rule('worker')
          .test(/\.worker\.js$/)
          .use('worker-loader').loader('worker-loader')
          .options({
            inline: true,
            fallback: false
          }).end();
      },
    // webpack-dev-server 相关配置
    devServer: {
        //配置跨域
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:5000',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''  //通过pathRewrite重写地址，将前缀/api转为/
                }
            }
        }
    },
}

需要注意的地方

1. 打包好的index.html存放的路径要和Flask 渲染的路径。
2. 静态资源static 文件要放在 python运行脚本的同级目录。
3. Axios的配置跨域问题

会出现 python 脚本函数的404 错误
因为将vue打包好的网页放置在了flask服务器上，所以不存在跨域问题，但是要将前端路由指向的路径进行修改。

解决方法一：
不删除vue.config.js中的服务器的别名。

@app.route('/RequestForm',methods=["POST"])

改成

@app.route('/api/RequestForm',methods=["POST"]) // '/api'为vue.config.js中的服务器的别名
解决方法二：
删除vue.config.js中的devServer。

4. 表单提交生成的PDF路径
   该问题解决的方法可能不止一种，目前采用的是其中一种。
   由于flask 所有的静态资源都在static 存放，所以后端通过reportlib生成的PDF文件也要存放在static下,并由前端读取前端vue-pdf读取。

5. vue-pdf worker.js 文件丢失问题
   需要修改 vuePdfNoSss.vue 文件。

<style src="./annotationLayer.css"></style>
<script>
 
	import componentFactory from './componentFactory.js'
    // 修改部分：引入pdfjsworker
	import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.js'
 
	if ( process.env.VUE_ENV !== 'server' ) {
 
		var pdfjsWrapper = require('./pdfjsWrapper.js').default;
		var PDFJS = require('pdfjs-dist/es5/build/pdf.js');
 
		if ( typeof window !== 'undefined' && 'Worker' in window && navigator.appVersion.indexOf('MSIE 10') === -1 ) {
            // 修改部分：注释原本的引入方法
			// var PdfjsWorker = require('worker-loader!pdfjs-dist/es5/build/pdf.worker.js');
			PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker();
		}
 
		var component = componentFactory(pdfjsWrapper(PDFJS));
	} else {
 
		var component = componentFactory({});
	}
 
	export default component;
</script>

以及vue.config.js

chainWebpack: (config) => {
        config.module
          .rule('worker')
          .test(/\.worker\.js$/)
          .use('worker-loader').loader('worker-loader')
          .options({
            inline: true,
            fallback: false
          }).end();
      },

打包过程及部署录像下载链接：

参考

[1] vue中使用vue-pdf打包之后预览报错hash+worker.js路径不对404