Vue项目打包后部署在二级目录，需要进行以下两步关键配置：
1.配置Vue CLI的vue.config.js文件
在vue.config.js中，你需要设置publicPath属性，以便在生产环境中正确地加载资源。假设你的项目将部署在https://yourdomain.com/yourapp/，配置如下
module.exports = {
publicPath: '/yourapp/', // 注意末尾的斜线
};这里的
publicPath指定了资源URL的前缀，当Vue CLI打包时，它会在所有静态资源链接前面加上这个路径。以这个为例，我要把程序部署在我的网站https://www.awingnet.com 下的 awing_web 目录，这样设置
2. 配置Vue Router的base属性
如果你的项目使用了Vue Router，并且使用了history模式，那么需要在router.js中设置base属性：
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
Vue.use(Router);
export default new Router({
mode: 'history',
base: '/yourapp/', // 与publicPath相同
routes: [
// your routes
],
});base属性确保所有路由路径相对于这个基础路径。
3.部署步骤：
运行打包命令 使用Vue CLI，你可以运行npm run build或yarn build来生成生产环境的构建文件。
生成的文件夹在项目根目录下的dist文件夹：
上传文件 将dist目录下的所有内容上传到服务器的/yourapp/目录下。确保服务器配置正确，能够处理history模式的路由。
服务器配置 由于history模式的路由需要服务器进行特殊配置，服务器需要配置为当请求的路径找不到对应的静态资源时，返回index.html。
然后浏览器访问http://yourweb/yourapp/,就可以进入项目了
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
