本文主要是介绍从零开始，构建电子地图网站：0_16_VUE打包合并到后端，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
我们要先把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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script type="text/javascript" src="/static/config.js"></script>
<title>vue-gismap</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</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，这个是遗漏项。
<div style="background-color: #fff; height: 100vh;width: 15%;position:absolute;left:0px;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
接下来该做的就是部署了。
这篇关于从零开始，构建电子地图网站：0_16_VUE打包合并到后端的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
