Vue项目的打包上线运行(Tomcat)和SpringBoot打包

Posted Lee_Sung

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue项目的打包上线运行(Tomcat)和SpringBoot打包相关的知识,希望对你有一定的参考价值。

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

以上是关于Vue项目的打包上线运行(Tomcat)和SpringBoot打包的主要内容,如果未能解决你的问题,请参考以下文章

vue项目打包上线

Vue项目如何打包问题总结

Vue项目部署,打包发布上线

vue项目如何打包扔向服务器

vue项目如何打包扔向服务器

vue cli3项目打包部署到tomcat服务器运行