vue项目打包步骤

如题,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,修改

<!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项目打包步骤_第1张图片
注:在写项目的时候vue中用的是history模式,打包时候因为有报错所以改成了哈希模式,这样的项目url地址中还是会有#,不过不妨碍。

const router = new Router({
     
    // mode: 'history', // 去掉url中的#
    // base: '/webapp/',  
    routes
})

// 3. 导出路由
export default router

你可能感兴趣的:(Vue的一些逻辑,语句写法)