基于Vue.js的大型报告页项目实现过程及问题总结（一）

悠悠 2021-09-30 01:12 122阅读 0赞

今年5月份的时候做了一个测评报告项目，需要在网页正常显示的同时且可打印为pdf，当时的技术方案采用jquery+template的方式，因为是固定模板所以并没有考虑报告的模块化区分，九月底产品提出新的需求，由于报告页数动辄上千页，所以希望用户自行选择内容生成报告，这个时候原项目就不够灵活了，与小伙伴商量决定将这个项目使用vue进行重构，对报告模块进行细分封装组件复用，大概一个月的工期，中途遇到n多坑，趁着今天有时间将实现思路整理出来并将出现的问题总结一下

整体的实现思维导图如下：

![1055667-20171030174242965-1313817532.png][]

需要考虑的：

1.可生成PDF版且可打印

2.根据后台获取的json生成包含相应模块的报告

3.组件内基于echarts封装图表的引用

4.目录模块的页码定位

5.如何进行模块内的细分（如1.2.1.3）；

6.webpack对多页面编译的配置

Ps：转PDF插件使用的是**OpenHtmlToPdf**具体配置方法可自行百度，在这里不过多赘述。

关于pdf的一点小坑（知识点朋友们！）：

网页打印A4纸的尺寸是（**1123\*793**），在使用OpenHtmlToPdf时无法使用css3百分之八十的属性，像translate等，还有就是margin-top不会生效，使用padding-top代替吧，打印生无法请求ajax，如需打印请将数据先存储到本地再行打印，可根据不同浏览方式判断两种方案。

以下实现全部是基于Vue-cli快速构建的项目中实现的，vue-cli的安装网上有很多详细的教程不过多说了

1.新建项目，命令行执行代码：

vue init webpack vuetest

命令输入后，会进入安装阶段，需要用户输入一些信息

Project name (vuetest)                    项目名称，可以自己指定，也可直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客[为什么文件名要小写][Link 1] ，可以参考一下。

Project description (A Vue.js project)  项目描述，也可直接点击回车，使用默认名字

Author (........)       作者，不用说了，你想输什么就输什么吧

接下来会让用户选择

Runtime + Compiler: recommended for most users    运行加编译，既然已经说了推荐，就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   仅运行时，已经有推荐了就选择第一个了

Install vue-router? (Y/n)    是否安装vue-router，这是官方的路由，大多数情况下都使用，[vue-router官网][vue-router] 。这里就输入“y”后回车即可。

Use ESLint to lint your code? (Y/n)      是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手就不用了，一般项目中都会使用。[ESLint官网][ESLint]

接下来也是选择题Pick an ESLint preset (Use arrow keys)            选择一个ESLint预设，编写vue项目时的代码风格，因为我选择了使用ESLint

Standard (https://github.com/feross/standard)    标准，有些看不明白，什么标准呢，去给提示的[standard][]github地址看一下， 原来时js的标准风格

AirBNB (https://github.com/airbnb/javascript)    JavaScript最合理的方法，这个github地址说的是JavaScript最合理的方法

none (configure it yourself)    这个不用说，自己定义风格

具体选择哪个因人而异吧  ，我选择标准风格

Setup unit tests with Karma + Mocha? (Y/n)  是否安装单元测试，我选择安装

Setup e2e tests with Nightwatch(Y/n)?     是否安装e2e测试 ，我选择安装

完成

初始的目录结构大概是这样的

![1055667-20171102134155841-497989146.png][]

由于是多页面应用所以需要在src下建一个modle文件夹里面是两个不同的项目

![1055667-20171102140743201-73947929.png][]

注意：

这里的index.html是入口文件，一定不能少，这这里做中转默认进入demo1的页面

<body>
        <script>
            location.href = "module/demo1.html";
        </script>
    </body>

下面对多页面进行配置，主要操作config和build这两个文件夹

/build
        build.js #构建生产代码 dev-client.js dev-server.js #执行本地服务器 utils.js #额外的通用方法 webpack.base.conf.js #默认的webpack配置 webpack.dev.conf.js #本地开发的webpack配置 webpack.prod.conf.js #构建生产的webpack配置 /config 配置文件 dev.env.js index.js pord.env.js test.env.js /src assets #放资源 components #组件 /module #页面模块 /home #子页面 index.html #模版页面 index.js #js入口 // 注意，这里的html和js的文件名要一致，如上面就是index /dist #最后打包生成的资源 /js /css /home

## 修改默认的webpack配置webpack.base.conf.js ##

生成需要的入口文件

var path = require('path')  
var config = require('../config')  
var utils = require('./utils')  
var projectRoot = path.resolve(\_\_dirname, '../')  
var glob = require('glob');  
var entries = getEntry(\['./src/demo1/index/\*.js', './src/module/demo2/\*.js'\]); // 获得入口js文件

var env = process.env.NODE\_ENV  
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the  
// various preprocessor loaders added to vue-loader at the end of this file  
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)  
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)  
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd

module.exports = \{  
entry: entries,  
output: \{  
path: config.build.assetsRoot,  
publicPath: process.env.NODE\_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,  
filename: '\[name\].js'  
\},  
resolve: \{  
extensions: \['', '.js', '.vue','.json'\],  
  
fallback: \[path.join(\_\_dirname, '../node\_modules')\],  
alias: \{  
'vue$': 'vue/dist/vue',  
'src': path.resolve(\_\_dirname, '../src'),  
'common': path.resolve(\_\_dirname, '../src/common'),  
'components': path.resolve(\_\_dirname, '../src/components')  
\}  
\},  
resolveLoader: \{  
fallback: \[path.join(\_\_dirname, '../node\_modules')\]  
\},  
module: \{  
loaders: \[\{  
test: /\\.vue$/,  
loader: 'vue'  
\},  
\{  
test: /\\.js$/,  
loader: 'babel',  
include: projectRoot,  
exclude: /node\_modules/  
\},  
\{  
test: /\\.json$/,  
loader: 'json'  
\},  
\{  
test: /\\.(png|jpe?g|gif|svg)(\\?.\*)?$/,  
loader: 'url',  
query: \{  
limit: 10000,  
name: utils.assetsPath('img/\[name\].\[hash:7\].\[ext\]')  
\}  
\},  
\{  
test: /\\.(woff2?|eot|ttf|otf)(\\?.\*)?$/,  
loader: 'url',  
query: \{  
limit: 10000,  
name: utils.assetsPath('fonts/\[name\].\[hash:7\].\[ext\]')  
\}  
\}  
\]  
\},  
vue: \{  
loaders: utils.cssLoaders(\{  
sourceMap: useCssSourceMap  
\}),  
postcss: \[  
require('autoprefixer')(\{  
browsers: \['last 2 versions'\]  
\})  
\]  
\}  
\}

## 修改本地开发的webpack配置webpack.dev.conf.js ##

这里是和本地服务器有关的配置

这里是根据目录生成对应的页面

var path = require('path');  
var config = require('../config')  
var webpack = require('webpack')  
var merge = require('webpack-merge')  
var utils = require('./utils')  
var baseWebpackConfig = require('./webpack.base.conf')  
var HtmlWebpackPlugin = require('html-webpack-plugin')  
var glob = require('glob')  
// add hot-reload related code to entry chunks  
Object.keys(baseWebpackConfig.entry).forEach(function (name) \{  
baseWebpackConfig.entry\[name\] = \['./build/dev-client'\].concat(baseWebpackConfig.entry\[name\])  
\})  
module.exports = merge(baseWebpackConfig, \{  
module: \{  
loaders: utils.styleLoaders(\{ sourceMap: config.dev.cssSourceMap \})  
\},  
// eval-source-map is faster for development  
devtool: '\#eval-source-map',  
plugins: \[  
new webpack.DefinePlugin(\{  
'process.env': config.dev.env  
\}),  
// https://github.com/glenjamin/webpack-hot-middleware\#installation--usage  
new webpack.optimize.OccurenceOrderPlugin(),  
new webpack.HotModuleReplacementPlugin(),  
new webpack.NoErrorsPlugin()  
\]  
\})

var pages = getEntry(\['./src/module/\*.html','./src/module/\*\*/\*.html'\]);

for (var pathname in pages) \{  
// 配置生成的html文件，定义路径等  
var conf = \{  
filename: pathname + '.html',  
template: pages\[pathname\], // 模板路径  
inject: true, // js插入位置  
// necessary to consistently work with multiple chunks via CommonsChunkPlugin  
chunksSortMode: 'dependency'

\};

if (pathname in module.exports.entry) \{  
conf.chunks = \['manifest', 'vendor', pathname\];  
conf.hash = true;  
\}

module.exports.plugins.push(new HtmlWebpackPlugin(conf));  
\}

## 修改构建生产的webpack配置webpack.prod.conf.js ##

## 修改配置文件config ##

修改index.js

在build.js中会引用assetsRoot，这里就是对应的根目录，改成你想要输出的地址就好了。ps：这里是相对地址
    assetsPublicPath会被引用插入到页面的模版中，这个是你资源的根目录

// see http://vuejs-templates.github.io/webpack for documentation.
    var path = require('path')
    
    module.exports = {
      build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '../',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css']
      },
      dev: {
        env: require('./dev.env'),
        port: 8080,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
      }
    }

ok，配置结束，一个基本的多页面应用已经成功建成

接下来就进入正题了，放在下一篇来写。。。。。。。

转载于:https://www.cnblogs.com/Smiled/p/7755628.html

[1055667-20171030174242965-1313817532.png]: /images/20210725/9f1a663e1471460885248eb848d157cc.png
[Link 1]: http://www.ruanyifeng.com/blog/2017/02/filename-should-be-lowercase.html
[vue-router]: http://router.vuejs.org/zh-cn/
[ESLint]: http://eslint.org/
[standard]: https://github.com/feross/standard
[1055667-20171102134155841-497989146.png]: /images/20210725/be31faa41a354c03bf954d16f93c2b6d.png
[1055667-20171102140743201-73947929.png]: /images/20210725/650e0081aa414c0aabe5bb007bbf7b06.png