前言
官方的vue构建基于vite
1，创建vue项目
npm init vue@latest✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formating? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.2，进入项目，安装依赖包，启动项目
cd <your-project-name>
npm install
npm run dev然后你就可以愉快的开发了，假设开发完成，咱们就要部署项目到服务器，本文用docker部署。
一，没有跨域请求项目的部署
1，构建项目的静态文件
npm run build在项目根目录会生成dist文件夹，这就是项目的静态资源。
2，文件根目录编写Dockerfile
FROM nginx
COPY ./dist /usr/share/nginx/html3, 创建名叫vue-nginx的镜像，版本号1.0.0，注意最后的那个点，表示当前目录
docker build -t vue-nginx:1.0.0 .4，查看本地的镜像
docker images下面就是我们创建好的镜像
REPOSITORY TAG IMAGE ID CREATED
vue-nginx 1.0.0 6358a9a572cf 5 minutes ago5， 使用镜像创建容器
docker run -d --name vue-nginx -p 80:80 vue-nginx:1.0.0这时候在浏览器查看 http://localhost 就能看到我们的项目了
6，查看容器 docker ps，我们能查看到一个名叫 vue-nginx的容器
docker ps二，有跨域请求的项目部署
1，如果本地开发的时候我们有跨域请求，在vite.config.js可以设置proxy
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
server: {
proxy: {
// string shorthand
// "/api": "http://120.26.91.125",
"/api": {
target: "http://xxx.xxx.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
这样我们本地开发，跨域使用代理可以解决，但是我们
npm run build之后生成的静态项目，因为vite只支持本地开发，跨域不起作用了
2，设置nginx的配置文件，在项目根目录下创建名为default.conf的文件
server {
listen 80;
listen [::]:80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
location /api/sts {
proxy_pass http://120.26.91.125/sts;
}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}重点修改proxy_pass这里，根据自己项目的实际情况修改好跨域请求
3，上面修改好之后，我们修改Dockerfile这个文件
FROM nginx
WORKDIR /usr/share/nginx/html
COPY ./dist .
COPY default.conf /etc/nginx/conf.d/default.conf
上面我们增加了最后一句，意思是把default.conf的nginx配置文件复制到容器里想对应的目录
4，然后我们就可以docker创建新的镜像，注意后面的版本号和上次不同，使用1.0.1 ，还有注意最后那个点，表示的当前目录
docker build -t vue-nginx:1.0.1 .5，docker images 可以查看到我们创建的新镜像vue-nginx:1.0.1
6，使用新镜像创建容器
docker run -d -p 80:80 vue-nginx:1.0.1这个时候就可以在浏览器打开http://localhost查看我们的项目
7，如果创建失败，看看是不是80端口被占用，如果有容器占用了80端口，使用下面命令可以删除
docker rm -f [容器id]