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

你可能感兴趣的:(Java,Web,Java,vue)