一图抵千文:记录vue3的打包和发布_vue3打包public下面的文件会上传吗

1.vue项目的编写

第一步肯定是先编写代码 写完后在打包

2.vue打包 只说需要的

因为vue3 不在有vue.config.js的文件了
所以自己创建

module.exports = {
    //项目的打包地址，默认放到根目录的dist文件中
    outputDir:'dist' ,
    //静态资源 css js ...
    assetsDir: 'static',  //相对于dist[outputDir] 里面的路径 dist/static
    //项目的部署地址
    publicPath: '/pixiPro/',  //需要了解一些nginx linux才行 就是服务器存放的文件夹 之后会说
}
1
2
3
4
5
6
7
8

打包之后就是

以上就完成了打包

3.上传到服务器

上传打包的信息

如果以上信息没有错误
name就可以打开浏览器 根据你的nginx配置的端口 进行访问了

4. 浏览器访问

以上就实现了部署

7. 总结

1.基本就是在打包时候需要设置 publicPath的字段 且保持和服务器文件夹一致
2.需要手动创建vue.config.js文件
3.把打包上传到服务器
3.服务器部署 需要nginx的知识 根据nginx的目录 设置相应文件创建