后端+vue之打包部署

后端打包启动

1、pom.xml添加依赖

<build>
		<finalName>${project.artifactId}</finalName>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<fork>true</fork> <!-- 如果没有该配置，devtools不会生效 -->
				</configuration>
			</plugin>
		</plugins>
	</build>

 

2、mvn clean package -Dmaven.test.ship=true 跳过测试直接打包生成的jar

3、简单运行

java -jar xxx.jar --其他参数

vue之打包部署

1、在vue项目之下npm install之后是OK的，工程根目录下：vue.config.js的部分配置

const port = process.env.port || process.env.npm_config_port || 80 // 端口

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  // assetsDir: 'static',
  assetsDir: '',
  // 是否开启eslint保存检测，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // webpack-dev-server 相关配置
  devServer: {
    host: '0.0.0.0',
    port: port,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },

 

2、npm run build或者npm run build:prod，后面的是自己配置，参考nginx的下面红色初配置一致

    

3、自动生成dist，如果我们配置vue.config.js的 assetsDir: 'static',这里css/fonts/img/js会在它文件夹里面，index.html里面会在路径上自动添加上static的

 

第一种：nginx来部署

1、下载安装，把html文件夹里面的全部替换，这个时候启动nginx访问：localhost会自动到项目首页，但是刷新会404，

                            

2、继续修改nginx配置conf/nginx.conf

添加try_files $uri $uri/ /index.html;

  location / {
            root   html;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

如果我们的项目添加了自定义VUE_APP_BASE_API = '/prod-api'

需要再添加location的兼容

location /prod-api/{
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8080/;
		}

3、再次进来，刷新是OK了