Vue项目打包到spring的采坑之路

Vue项目打包到spring的采坑之路

一、打包前的配置

  1. 配置utils

在这里插入图片描述

// Extract CSS when that option is specified
   // (which is the case during production build)
   if (options.extract) {
      return ExtractTextPlugin.extract({
         use: loaders,
         fallback: 'vue-style-loader',
         publicPath: '../'              
 /*根据自己的图片路径添加此行,publicPath:值为“../” 或 “../../”*/
      })
   } else {
      return ['vue-style-loader'].concat(loaders)
   }
}
  1. 配置webpack.prod.conf.js
    在这里插入图片描述
output: {
   path: config.build.assetsRoot,
   filename: utils.assetsPath('js/[name].[chunkhash].js'),
   chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
   publicPath: "./"     /*添加这行代码*/

},
  1. 配置index.js
    在这里插入图片描述
build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',      /*把assetsPublicPath的值改为'./'*/
  1. 配置router下index.js
    在这里插入图片描述
export default new Router({
   mode: 'history',  /*若为history,刷新后页面404,所以要把这行删掉*/
   base:'/needs-project/',/*base写项目名*/

二、vue项目打包到spring下步骤

  1. cmd进入项目目录,运行npm run build
  2. 把dist下static下的文件,copy到spring项目src-main-webapp-static下
  3. 把dist下index.html copy到src-main-webapp里,替换掉原来的index
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值