如题,vue项目打包
1.打开vue.config.js文件
const webpack = require('webpack')
module.exports = {
// 基本路径
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
outputDir: "dist", //打包时生成的生产环境构建文件的目录
assetsDir: 'public', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets',
'components': '@/components',
'views': '@/views',
'network': '@/network',
'tableViews': '@/views/mainPage/tableViews'
}
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
]
},
}
用npm run build跑一下项目。
2.打开dist文件夹,找到index.html,修改<link的路径
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=favicon.ico>
<title>首页</title>
<link rel=stylesheet href=./leaflet-all/css/bootstrap3.min.css>
<link rel=stylesheet href=./leaflet-all/css/jquery-ui.css>
<link rel=stylesheet href=./leaflet-all/css/easyui.css>
<link rel=stylesheet href=./font-awesome/css/font-awesome.min.css>
<link href=public/js/chunk-vendors.33befec6.js rel=preload as=script>
<link href=public/css/chunk-vendors.1c694d0b.css rel=stylesheet>
<link href=public/css/app.baf54c29.css rel=stylesheet>
</head>
<body><noscript><strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id=app></div>
<script src=./leaflet-all/scripts/jquery-1.9.1.min.js></script>
<script src=./leaflet-all/scripts/jquery-ui.min.js></script>
<script language=javascript src=./leaflet-all/scripts/W.Map.js></script>
<script language=javascript src=./leaflet-all/scripts/popper.min.js></script>
<script language=javascript src=./leaflet-all/scripts/bootstrap3.min.js></script>
<script language=javascript src=./leaflet-all/scripts/leaflet.js></script>
<script language=javascript src=./leaflet-all/scripts/leaflet.draw-src.js></script>
<script language=javascript src=./leaflet-all/scripts/easy-button.js></script>
<script language=javascript src=./leaflet-all/scripts/LevelControl.js></script>
<script language=javascript src=./leaflet-all/scripts/Fence.js></script>
<script language=javascript src=./leaflet-all/scripts/bootstrap-notify.min.js></script>
<script language=javascript src=./leaflet-all/scripts/bootstrap-tagsinput.js></script>
<script src=./leaflet-all/scripts/jquery.easyui.min.js></script>
<script src=./leaflet-all/scripts/easyui-lang-zh_CN.js></script>
<script src=./leaflet-all/scripts/jquery.tooltip.js></script>
<script language=javascript src=./leaflet-all/scripts/RouteBar.js></script>
<script src=./leaflet-all/scripts/base.js></script>
</body>
</html>
3.把dist文件夹下所有东西放到后台项目中前端内容所在的文件夹下,前后端整合在一起。(例如我们的是在webapp文件夹下)
注:在写项目的时候vue中用的是history模式,打包时候因为有报错所以改成了哈希模式,这样的项目url地址中还是会有#,不过不妨碍。
const router = new Router({
// mode: 'history', // 去掉url中的#
// base: '/webapp/',
routes
})
// 3. 导出路由
export default router