时间：2023-07-04 07:21:29 点击次数：7
就这一个坑，我差不多填了三四天，说多了都是，虽然网上有很多的实例，但是回过头来给我感觉写的还是模棱两可，不然我也不至于填坑这么久，下面分享一个我自己部署成功的案例。
我的环境基于vue router4，一度怀疑是有bug了，所以才不能部署成功，哈哈。。。（真是蠢到家了）
好了言归正传，我的vue.config.js配置如下
module.exports = { // 项目部署的基础路径 // 我们默认假设你的域名：https://www.my-app.com/ // 如果你的应用时部署在一个子路径下，那么你需要在这里 // 指定子路径 `/capp/`。比如，如果你的应用部署在 // https://www.my-app/capp/ // 那么将这个值改为 `/capp/` publicPath: /capp/, // 将构建好的文件输出到哪里（或者说将编译的文件）,官方是dist,可以自己修改，为方便区分我修改为cappdist outputDir: cappdist, // 放置静态资源的地方 (js/css/img/font/...) assetsDir: , // 用于多页配置，默认是 undefined pages: { index: { // 入口文件 entry: src/main.js,/*这个是根入口文件*/ // 模板文件 template: public/index.html, // 输出文件 filename: index.html, // 页面title title: }, // 简写格式 // 模板文件默认是 `public/subpage.html` // 如果不存在，就是 `public/index.html`. // 输出文件默认是 `subpage.html`. subpage: src/main.js/*注意这个是*/ }, // 是否在保存的时候使用 `eslint-loader` 进行检查。 // 有效的值：`ture` | `false` | `"error"` // 当设置为 `"error"` 时，检查出的错误会触发编译失败。 lintOnSave: true, // 使用带有浏览器内编译器的完整构建版本 // 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时 runtimeCompiler: false, // babel-loader 默认会跳过 node_modules 依赖。 // 通过这个选项可以显式转译一个依赖。 transpileDependencies: [/* string or regex */], // 是否为生产环境构建生成 source map？ productionSourceMap: false, // 调整内部的 webpack 配置。 // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md chainWebpack: () => { }, configureWebpack: () => { }, // CSS 相关选项 css: { // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中) // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象 extract: true, // 是否开启 CSS source map？ sourceMap: false, // 为预处理器的 loader 传递自定义选项。比如传递给 // sass-loader 时，使用 `{ sass: { ... } }`。 loaderOptions: {}, // 为所有的 CSS 及其预处理文件开启 CSS Modules。 // 这个选项不会影响 `*.vue` 文件。 requireModuleExtension: false }, // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader` // 在多核机器下会默认开启。 parallel: require(os).cpus().length > 1, // PWA 插件的选项。 // 查阅 https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-pwa pwa: {}, // 配置 webpack-dev-server 行为。 devServer: { open: process.platform === darwin, host: 0.0.0.0, port: 8080, https: false, hotOnly: false, // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理 // proxy: { // /api: { // target: http://localhost:8880, // changeOrigin: true, // secure: false, // //ws:true, // pathRewrite: { // ^/api: /static/mock// 请求数据路径别名,这里是注意将static/mock放入public文件夹 // } // } // }, // eslint-disable-next-line no-unused-vars before: app => { } }, // 三方插件的选项 pluginOptions: { // ... } }我的router/index.js文件如下
import {createRouter, createWebHistory} from vue-router const routes = [ { path: "/", name:Home, component: () => import(@/views/Home),//懒加载写法 meta: {title: "", icon: "el-icon-s-home"}, }, { path: /friends, component: () => import(@/views/FriendLink.vue), meta: {title: 友情链接}, }, { path: /contact, component: () => import(@/views/Contact.vue), // meta: {title: 友情链接}, }, { path: /introduction, component: () => import(@/views/Introduction.vue), meta: {title: 企业简介}, }, { path: /404, component: () => import(@/views/404.vue), meta: {title: 404}, }, { // 匹配所有路径 vue2使用* vue3使用/:pathMatch(.*)*或/:pathMatch(.*)或/:catchAll(.*) path: "/:pathMatch(.*)*", redirect: "/404", meta: {title: "404"} } ] //这是新版Router写法 const router = createRouter({ // 内部提供了 history 模式的实现。 // history: createWebHashHistory(), //process.env.BASE_URL必需的，项目自动加载vue.config.js中publicPath，即vue前几个版本中的baseUrl或base history: createWebHistory(process.env.BASE_URL), routes, // `routes: routes` 的缩写 }) export default routerOK,Vue项目这边准备完毕，其他不重要的代码就不贴了，例如页面/views/Introduction.vue等等，然后编译打包vue-cli-service build得到我们要部署的项目
最重要的nginx配置,我是本地配置的用的8088端口，nginx.conf只贴server部分（注意注释"//",拷贝使用的话记得改为“#”）
http {
server {
listen 8088;
server_name 192.168.31.50;
//对应vue.config.js中publicPath,注意加粗的地方
location /capp {
//项目真实路径
alias D:/workspace/cappdist/;
try_files $uri $uri/ /capp/index.html;
}
}
}
OK,访问成功
哇哈哈，填坑完毕，好开心。。。
