代码拉取完成,页面将自动刷新
nodejs-v14.19.0 windows11-家庭版
新建项目
vue create phoshow-vue-vant2
@vue/cli 5.0.8
npm i moment -s
npm i vue-router@3.0.6 -s
npm i axios -s
npm i vant@latest-v2 -S
npm i vconsole -s // 手机调试console
npm i sass-loader@7.3.1 -s 注:node版本
npm i node-sass@4.14.1 -s
/router/index.js
main.js引入router
import router from "router"
new Vue({
router,
render: h => h(App),
}).$mount('#app')
/api/request.js
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
# just a flag
NODE_ENV = 'development'
VUE_APP_ENV = 'dev'
BASE_URL = ''
# base api
VUE_APP_BTSTU ='/btstu'
{
"scripts": {
"dev": "vue-cli-service serve --mode development",
"build:prod": "vue-cli-service build --mode production --report",
"build:uat": "vue-cli-service build --mode uat --report",
"lint": "vue-cli-service lint"
}
}
页面中获取环境变量的方式:process.env.VUE_APP_BTSTU
注:修改环境变量需要重启项目
vue.config.js
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
// host: "localhost",
// port: 8081, // 端口号
// https: false, // https:{type:Boolean}
// open: false, //配置自动启动浏览器
// hotOnly: true, // 热更新
proxy: { //配置多个跨域
"/btstu": {
target: "http://api.btstu.cn/qqxt/api.php",
changeOrigin: true,
// ws: true,//websocket支持
secure: false,
pathRewrite: {
"^/btstu": ""
}
}
}
}
})
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。