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)
   }
}

2. 配置webpack.prod.conf.js
   

output: {
   path: config.build.assetsRoot,
   filename: utils.assetsPath('js/[name].[chunkhash].js'),
   chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
   publicPath: "./"     /*添加这行代码*/

},

3. 配置index.js
   

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',      /*把assetsPublicPath的值改为'./'*/

4. 配置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