前言
本文所采用技术栈: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。