Vue项目的打包上线运行（Tomcat）和SpringBoot打包

Posted 2022-11-21 Lee_Sung

1、Vue项目打包

当vue项目开发测试完成需要上线的时候，先修改几处配置，然后执行npm run build命令打包。此处以打包后发布到tomcat容器中运行为例。
1、修改/config/index.js文件，在module.exports中找到build子模块，找到描述Paths的属性assetsPublicPath: ‘/’,将其值改为‘./’如下：

build: 
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),	//dist是build后生成的目录名称，此处不知道有什么影响，笔者没有改，但是依然能运行
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),		//此处的dist同上，有待研究
    assetsSubDirectory: 'static',
    assetsPublicPath: './',			//修改此处，将"/"改为"./"
	......
  

网上有文章，说将dev模块中的assetsPubilcPath的“/”也改为"./"，但是本人测试并不需要，个人认为dev代表开发环境，build为生产环境，执行npm run build后，dev中的配置不再起作用了。

2、修改/src/router/index.js文件，在Router中添加base路径，用来指定将来浏览器中访问的地址（一般为工程名开头）。如下：

//......
export default new Router(
  mode: 'history',
  base:'/testvue/',		//添加此处，projectName自定义，这里起为工程名
  routes: [
	/*
	 *   ......
	 */
  ]
)

3、（这一步不做，在本人的项目中也是可以的）修改/build/utils.js文件，找到generateLoaders()方法，修改加载CSS的路径，如下：

//......
 // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) 
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) 
      loaders.push(
        loader: loader + '-loader',
        options: Object.assign(, loaderOptions, 
          sourceMap: options.sourceMap
        )
      )
    

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) 
      return ExtractTextPlugin.extract(
		publicPath: '../../',		//将本属性添加到此处
        use: loaders,
        fallback: 'vue-style-loader'
      )
     else 
      return ['vue-style-loader'].concat(loaders)
    
  
//......

以上操作，用来解决打包后运行项目出现空白页的问题。修改配置完成后，在项目根目录下执行命令，进行打包。

npm run build

执行成功后，会在根目录下多出dist目录，将dist目录copy到tomcat的webpapps目录下，并把目录名dist改为路由中配置的base属性的值（本例中修改的第二个文件/src/router/index.js中的base属性，必须匹配，否则也是空白页），启动tomcat测试成功。

2、SpringBoot项目打包

cd到工程的target同级目录，命令行运行

mvn clean package

如果执行成功，会在target目录下生成jar包，然后执行如下命令，启动项目

java -jar projectname.jar