Vue-cli3.0布局实战篇---打包项目

---

前言

本文所采用技术栈：vue3+vue-router4+vuex4+vant3，今天我们来一起看下，项目打包的具体步骤，这个结束后，我们就完成了一个vue-cli3.0的前端项目从开发到上线整个流程。

一、修改axios的baseURL为线上地址

import axios from "axios";
import {Toast} from 'vant';
import router from '../router/index';
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://vue3mallapi.***.com/api'

二、根据需要修改打包后的文件路径，文件名为vue.config.js

module.exports = {
    publicPath: './', // 根路径
    outputDir: 'dist', // 构建输出目录
    assetsDir: 'static', // 静态资源目录(js,css,img,fonts)
    lintOnSave: false, // 是否开启eslint保存检测,有效值（true||false||error)
    devServer: {
        port: 80,
        proxy: {
            // 配置跨域因为我们给url加上了前缀/api，我们访问/index/getNewsList就当于访问了：http://localhost:81/api/index/getNewsList。
            // 在proxy中拦截了/api,并把/api及其前面的所有替换成了target中的内容，因此实际访问Url是http://vuedemoapi.com/api/index/getNewsList。
            '/api': {
                target: 'http://vuedemoapi.com/api',
                ws: true, // 是否跨域
                changeOrigin: true,
                secure: false,
                // 重写地址
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

我把assetsDir修改为static，因为我的接口项目路径里有assets这个文件夹，这个大家根据自己需要进行修改。

三、执行打包命令

npm run build

耐心等待执行完毕，这时会在项目根目录下多出一个dist文件夹:

我们把dist文件夹下的文件拷贝到线上，这里我们以Thinkphp6.0的接口项目为例，把static文件夹，favicon.ico，index.html拷贝到项目根目录\public下，然后根据需要调整index.html为默认的打开文档，最后访问网址测试是否可以正常打开。

总结

以上代码片段可供参考，具体使用或者测试，请根据需求进行修改，对以上教程有异议，可在评论区评论或者联系我QQ1004991278。

最后，以上所有代码在我的开源仓库：https://github.com/maxzyt/vue3-mall-page，都可以找到，喜欢的点个star。