vue3项目的部署

1.配置路由的 让文件路由和服务器的路径对应起来

在路由中设置全局的配置 默认

‘/’ path: /login --实际上—> ’ /login’ 放到服务器上 就是 http:120.32.62.45/login 想一想 如果你有2个vue项目放到服务器 都是path:/login 那么此时 /login 一定会冲突

base配置后

/wuyu/ path: /login -实际上—> ’ /wuyu/login’ 放到服务器上 就是 http:120.32.62.45/wuyu/login 如果你有2个vue项目放到服务器 都是path:/login 项目一就是:path:/login 将会是/vue1存放文件夹/login 项目二就是:path:/login 将会是/vue2存放文件夹/login 不会冲突

2.因为vue3的项目目录 和vue2有这一定的不同

vue3 创建的项目文件目录 vue2的项目文件

通过比较可以发现 你找不到webpack的一些配置了 也就是config文件夹

一般来说vue2部署直接去config中找到 现在vue3没了webpack 那咋办 不要急 我找了对策 第一 你需要自己创建 一个vue.config.js文件

//项目目录
public
node-modules
src
vue.config.js //文件在根目录
vue.config.js 的配置 ：
...

vue3.0 之前的都是修改config/index.js 文件下的 assetsPublicPath 属性。
在 cli3 中 assetsPublicPath 属性被 baseUrl 取代，只需要在vue.config.js 添加baseUrl 属性 设为 ‘/wuyu/’ 即可。

cli4基本方法同上相同，都是修改 vue.config.js 文件 ，但将属性换为
publicPath ： /wuyu/ 

第二 在vue.config.js文件写入

module.exports = {
          
   
    publicPath: ./,
    outputDir: "dist", // 输出文件目录
    lintOnSave: false, // eslint 是否在保存时检查
    assetsDir: static, // 配置js、css静态资源二级目录的位置  
  }

这就算是自己配置的webpack 执行npm run build的时候他会来这个文件寻找配置 第三 打包后长什么样子呢 把static 展开 思考 如果webpack配置没有的话 那么构建的路径就是 一个dist文件夹里面放着 最后:这样使用vue.config.js打包的文件夹 和vue2的一模一样

举个板栗" 你的服务器 ip:8.151.69.49 你想把vue项目放到 8.151.69.49/app 目录下 你打包后的文件放到服务器app里面后 正确资源:8.151.69.49/app/static/css/css.css 但是实际请求的是:8.151.69.49/static/css/css.css

打包时 配置assetsPublicPath baseUrl publicPath 其实就是你vue打包后要放的文件夹的名字 在每次请求那些静态资源时候 能够添加你文件夹的名字 把8.151.69.49/static/css/css.css----变成8.151.69.49/app/static/css/css.css 这样才会返回数据

我们要解决的就是资源要找对的问题