从零开始，构建电子地图网站：0_16_VUE打包合并到后端

本文链接：https://blog.csdn.net/sinat_41310868/article/details/104743714

我们要先把vue打包，合并到spring boot中，然后打包后端工程，统一上线。

一、vue配置抽出

因为打包之后，文件都会混在一起，就很难修改了，所以要先把可能会修改的配置提取出来，再进行打包。

我们把请求后端的url提取出来。

1.config.js

在static中新建config.js文件。

转存失败重新上传取消

window.g = {

BASE_URL: 'http://localhost:8081/history/geometry?'

}

2.index.html

修改vue-gismap/index.html文件，引入config.js。

<!DOCTYPE html>

<html>

<head>

<title>vue-gismap</title>

</head>

<body>

</body>

</html>

3.HistoryMap.vue

var urlbase = window.g.BASE_URL;

二、打包

修改config/index.js

将bulid下的assetsPublicPath: '/',改为assetsPublicPath: './',。

'use strict'

// Template version: 1.3.1

// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {

dev: {

// Paths

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {},

// Various Dev Server settings

host: 'localhost', // can be overwritten by process.env.HOST

port: 8082, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

autoOpenBrowser: false,

errorOverlay: true,

notifyOnErrors: true,

poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

/**

* Source Maps

// https://webpack.js.org/configuration/devtool/#development

devtool: 'cheap-module-eval-source-map',

// If you have problems debugging vue-files in devtools,

// set this to false - it *may* help

// https://vue-loader.vuejs.org/en/options.html#cachebusting

cacheBusting: true,

cssSourceMap: true

build: {

// Template for index.html

index: path.resolve(__dirname, '../dist/index.html'),

// Paths

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',

assetsPublicPath: './',

/**

* Source Maps

productionSourceMap: true,

// https://webpack.js.org/configuration/devtool/#production

devtool: '#source-map',

// 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'],

// Run the build command with an extra argument to

// View the bundle analyzer report after build finishes:

// `npm run build --report`

// Set to `true` or `false` to always turn it on or off

bundleAnalyzerReport: process.env.npm_config_report

}

2.npm run build

运行npm run bulid，报错：

building for production...Error processing file: static/css/app.40775b4bfe6e59fc37d0361042e9ab75.css

(node:8320) UnhandledPromiseRejectionWarning: CssSyntaxError: D:\gismap\qianduan\vue-gismap\static\css\app.40775b4bfe6e59fc37d0361042e9ab75.css:22:6: Unknown word

打包css的时候发现unknown word。

我的css都是按照标准写的，为什么会打包出错？

经过排查发现，在App.vue中，我修改了全局的滚动条样式。

/*更改全局的滚动条样式*/

::-webkit-scrollbar {

width: 8px;

height: 8px;

background-color: #fff;

}

::-webkit-scrollbar-thumb {

// border-radius:5px;

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

background-color: rgba(0, 0, 0, .1)

}

查了一下webkit，发现在网站上写了：

该特性是非标准的，请尽量不要在生产环境中使用它！

我的错！不能引用非标准的样式！注释掉！

再运行npm run build。

在vue-gismap文件夹下多出了一个dist文件夹，这个就是打包生成的文件，把它放到后端程序中。

合并入springboot

在..\gismap\src\main\resources下新建一个文件夹static。把dist文件夹中的内容拷贝到static中。

转存失败重新上传取消

三、运行测试

运行..\gismap\src\main\java\com\history\gismap\GismapApplication.java

访问页面：

http://localhost:8081/index.html#/

结果如图，有些瑕疵，首先复选框上面有多余的一块，其次复选框列表的图标没出来。

转存失败重新上传取消

我们修改下：

首先在HistoryMap.vue组件中，给左侧栏加一个绝对的top坐标，top:60px，这个是遗漏项。

<el-scrollbar style="height: 100%;">

<el-tree :data="treedata" show-checkbox node-key="id" :props="defaultProps" @check="changecheck">

</el-tree>

</el-scrollbar>

</div>

其次在build/webpack.base.conf.js中修改图标打包的limit值，把它改大点，由原来的10000，改成80000。

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 80000,

name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

}

重新打包下，npm run build，将打包结果dist文件夹中的内容拷贝到后台static文件夹中，重新启动下工程。

访问页面：

http://localhost:8081/index.html#/

转存失败重新上传取消

完美！

四、git

将前后端程序都更新一下。

后端git：

https://github.com/yimengyao13/gismap.git

分支：merge

前端git：

https://github.com/yimengyao13/vue-gismap.git

分支：merge

接下来该做的就是部署了。