Vue.Js+SpringBoot 打包部署至生产环境

具体步骤

在config/index.js中有开发环境与生产环境的相关配置。

工程build相关配置：

build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

其中env: require('./prod.env')指生产环境配置信息。存放在prod.env.js内，具体内容为：

module.exports = {
  NODE_ENV: '"production"',
  BASE_URL:'"/project/"',
}

修改完毕后，进行打包并与后台工程合并部署。

1. 执行npm run build对Vue.Js工程进行打包，在工程文件中会生成dist文件夹。
2. 将dist文件夹内的所有文件及文件夹copy至Spring Boot后台工程resources/static下。
3. 修改pom.xml的打包方式为war，并将最终打包文件名修改为与Vue.js工程中prod.env.js中BASE_URL相同。
   pom.xml修改打包方式以及打包文件名称：

#修改打包方式为war
<packaging>war</packaging>

    <build>
        #finalName 为最终打包文件名
        <finalName>project</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <executable>true</executable>
                </configuration>
            </plugin>
        </plugins>
    </build>

4. 将打好的war包部署到TomCat Server内，启动部署后即可访问。

一些问题

1. 为何要把Vue.js工程生成的dist文件夹下的文件全部放在Spring Boot工程的resources/static下呢？
   因为Springboot默认的静态资源目录：

#resources/static目录用于存放各类静态资源文件
classpath:/static
classpath:/public
classpath:/resources
classpath:/META-INF/resources

2. 是否可以自己去指定放置的目录？
   可以。在application.properies中添加：

#test即为resources下自定义的目录
spring.resources.static-locations=classpath:/test