docker打包vue vite前端项目

打包vue vite 前端项目

(如若提供一些帮助,请帮忙点个赞)
1.打包时将测试删除
在这里插入图片描述

2.修改配置在这里插入图片描述
3.打包项目

npm run build

在这里插入图片描述
显示成功(黄的也不知道是啥)
打包好的前端文件放入
在这里插入图片描述

4.配置 default.conf
在这里插入图片描述

upstream wms-app {
    server 你自己的ip加端口 ;
    server 192.168.xx.xx:8080 ;
}
server {
listen 80;
server_name localhost; 

location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
# location /api/ {
#             add_header 'Access-Control-Allow-Origin' '*';
#             add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
#             add_header 'Access-Control-Allow-Headers' 'Authorization'; #跨域设置
#             proxy_pass http://192.168.xx.xx:8080; 
#         }
location /api/ {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization'; #跨域设置
            proxy_pass http://wms-app ; 
        }

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

5.配置dockerfile
在这里插入图片描述

FROM nginx

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

6.进入你的文件夹下面 我的是 /root/206/web

docker build -t web:v1 .
注意后面的 . 点
7.运行
docker run -it -p 3777:80 --name=web web:v1
在这里插入图片描述

8.windows测试

在这里插入图片描述

<think>好的,用户想了解如何使用Vue3搭建前端项目的实战教程。首先,我需要回顾之前的引用内容,看看有没有相关的信息。引用[1]提到了使用Vite创建Vue3+TypeScript项目的步骤,包括项目创建命令和配置vite.config.ts。引用[2]则补充了插件配置,比如VueSetupExtend。这些都是关键点,应该包含在回答中。 接下来,我需要按照用户的要求组织回答结构,确保步骤清晰。用户可能希望从环境准备开始,然后是项目创建、目录结构、插件配置、路由和状态管理,最后是部署。每个步骤需要详细说明,并提供代码示例,比如vite.config.ts的配置和路由设置。 同时,用户要求生成相关问题,我需要考虑常见的后续问题,比如Vite的优势、兼容性处理、插件推荐和性能优化。这些问题有助于用户进一步学习。 需要注意的是,用户之前的引用中提到了Vite的兼容性问题,所以在回答中应该提到如何处理旧版浏览器,比如使用@vitejs/plugin-legacy。另外,引用中提到的VueSetupExtend插件也是一个有用的点,可以推荐给用户。 最后,确保所有数学公式和代码块格式正确,使用中文回答,并在引用处添加标识。检查是否有遗漏的步骤,比如部署部分可能需要简要说明常用的方法,如npm run build和Docker部署。</think>### Vue3前端项目搭建实战教程 #### 一、环境准备 1. 安装Node.js(建议16.x或18.x版本) ```bash node -v # 验证安装 ``` 2. 使用Vite构建工具(速度比传统webpack快10-100倍)[^1] #### 二、项目创建 ```bash npm create vite@latest ``` 按提示选择配置: ``` Project name: » my-vue3-project Framework: » Vue Variant: » TypeScript ``` 完成创建后执行: ```bash cd my-vue3-project npm install npm run dev ``` #### 三、项目结构解析 ```markdown ├── src/ │ ├── assets/ # 静态资源 │ ├── components/ # 组件 │ ├── App.vue # 根组件 │ └── main.ts # 入口文件 ├── vite.config.ts # Vite配置 ├── tsconfig.json # TS配置 ``` #### 四、插件配置(vite.config.ts) ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import VueSetupExtend from 'vite-plugin-vue-setup-extend' // 支持setup语法糖[^2] export default defineConfig({ plugins: [ vue(), VueSetupExtend(), ], server: { port: 8080, open: true } }) ``` #### 五、路由配置(推荐使用vue-router@4) 1. 安装路由 ```bash npm install vue-router@4 ``` 2. 创建路由配置 ```typescript // src/router/index.ts import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', component: () => import('@/views/Home.vue') } ] export default createRouter({ history: createWebHistory(), routes }) ``` #### 六、状态管理(推荐使用Pinia) ```bash npm install pinia ``` ```typescript // src/store/index.ts import { defineStore } from 'pinia' export const useMainStore = defineStore('main', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }) ``` #### 七、部署准备 ```bash npm run build # 生成/dist目录 ``` 推荐部署方案: - 静态服务器(Nginx/Apache) - Docker容器化部署 - 云平台托管(Vercel/Netlify)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值