windows上部署vue3项目

使用npm run build打包之后,直接打开index.html无法看到网页内容。
需要在项目中新建一个vue.config.js的文件,内容如下:

module.exports = {
    // 基本路径 baseURL已经过时
    publicPath: './', 
    //publicPath: process.env.NODE_ENV === "production" ? "/dist/":"./", 
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // use the full build with in-browser compiler?
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    // compiler: false,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {},
    // vue-loader 配置项
    // https://vue-loader.vuejs.org/en/options.html
    // vueLoader: {},
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相关配置
    css: {
     // 是否使用css分离插件 ExtractTextPlugin
     extract: true,
     // 开启 CSS source maps?
     sourceMap: false,
     // css预设器配置项
     loaderOptions: {},
     // 启用 CSS modules for all css / pre-processor files.
     modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // 是否启用dll
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
    // dll: false,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
     open: process.platform === 'darwin',
     disableHostCheck: true,
     host: 'localhost',
     port: 8080,
     //localhost:8080
     https: false,
     hotOnly: false,
     before: app => {}
    },
    // 第三方插件配置
    pluginOptions: {
     // ...
    }
    }

重新打包生成新的dist
(在dist文件中新建一个WEB-INF文件夹,里面新建文件web.xml
内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
        http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
        version="3.1" metadata-complete="true">
     <display-name>Router for Tomcat</display-name>
     <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>


在把项目放到windows服务器
先设置IIS
新建网站,IP设置为未分配,端口号自己填写一个
关闭默认网站
在阿里云防火墙安全组中添加该端口

Windows 上使用 Docker 部署 Vue3 和 Spring Boot 项目,可以通过容器化的方式将前后端服务独立运行,并通过网络配置进行通信。以下是完整的部署步骤: ### 准备工作 1. **安装 Docker Desktop** 在 Windows 上安装 [Docker Desktop](https://www.docker.com/products/docker-desktop) 并确保其正常运行。Docker Desktop 提供了对 Docker CLI 工具的支持,并集成了容器管理界面。 2. **项目结构** 假设 Vue3 项目作为前端,Spring Boot 作为后端 API,两者分别运行在不同的容器中,建议使用 `docker-compose.yml` 文件来管理多容器应用。 --- ### 构建 Vue3 前端镜像 Vue 官方提供了一个用于容器化的 Docker 配置示例,可以基于此构建镜像: ```dockerfile # vue.Dockerfile FROM node:18 as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . ./ RUN npm run build FROM nginx:stable-alpine COPY --from=build-stage /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 构建 Vue3 镜像: ```bash docker build -f vue.Dockerfile -t vue3-app . ``` --- ### 构建 Spring Boot 后端镜像 确保 Spring Boot 项目已经打包为 `jar` 文件,然后创建 Dockerfile: ```dockerfile # springboot.Dockerfile FROM openjdk:17-jdk-slim COPY your-springboot-app.jar app.jar ENTRYPOINT ["java", "-jar", "app.jar"] ``` 构建 Spring Boot 镜像: ```bash docker build -f springboot.Dockerfile -t springboot-api . ``` --- ### 使用 Docker Compose 编排服务 创建 `docker-compose.yml` 文件,定义两个服务并设置网络互通: ```yaml version: &#39;3.8&#39; services: vue3-frontend: image: vue3-app ports: - "80:80" networks: - app-network springboot-backend: image: springboot-api ports: - "8080:8080" environment: SPRING_APPLICATION_JSON: &#39;{"spring":{"datasource":{"url":"jdbc:mysql://db:3306/mydb"}}}&#39; networks: - app-network networks: app-network: driver: bridge ``` 启动服务: ```bash docker-compose up -d ``` --- ### 配置 Nginx(可选) 如果需要使用 Nginx 作为反向代理,可创建一个额外的 Nginx 服务,并将其加入 `docker-compose.yml` 文件中,实现前后端路由的统一入口。 --- ### 验证部署 1. 打开浏览器访问 `http://localhost` 查看 Vue3 前端页面。 2. 访问 `http://localhost:8080/api/endpoint` 测试 Spring Boot 接口是否正常响应。 通过上述流程,可以在 Windows 环境下使用 Docker 成功部署 Vue3 和 Spring Boot 应用[^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值