尝试在本地开发并部署到本地的apache下的WWW/test/目录中。过程如下:
软件环境
vue版本:2.9.6
npm版本:6.14.10
开发工具:HBuilder X
WebServer:Apacher 2.4
后端:PHP 7.3.4
OS:Windows 10
创建项目并修改配置文件
1、创建项目
利用cmd访问到D:\Projects\目录下,执行
vue init webpack test
可以此创建名为test的vue项目。
安装axios,用于访问后端
cd test
npm i axios --save
2、利用HBuilder打开项目
略
3、修改config/index.js
...
dev:host:'127.0.0.1'
...
build:assetsPublicPath: '/test/'
4、修改src/router/index.js
在export defaut 中添加:
mode:"history",
base:"test",
5、修改src/main.js
在顶部添加axios相关内容:
import axios from 'axios' // 引入axios
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://127.0.0.1/test/php/' // 这是后端程序路径的前缀
6、php文件
<?php
//以下四行实现服务器端允许跨域访问
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Method:*");
header("Access-Control-Allow-Credentials:true");
header("Access-Control-Allow-Headers:X-Custom-Header,accept,content-type");
//以下行返回json数据至前端
echo(json_encode(array("code"=>1,"name"=>"gxy"),JSON_NUMERIC_CHECK));
?>
案例演示
1、src/components/Index.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="jump()">子组件</button>
<div>以下数据来自后端:</div>
<div>{{phpdata}}</div>
</div>
</template>
<script>
import test from '@/components/Test.vue'
export default {
name: 'Index',
data () {
return {
msg: '根据路由,这是默认内容。来自组件Index.vue',
phpdata:[]
}
},
methods:{
jump(){
this.$router.replace({path:'test'})
},
pulldata(){
this.$axios.post("pulldata.php").then(rs=>{
this.phpdata=JSON.stringify(rs.data);
})
}
},
mounted(){
let that=this;
that.pulldata();
}
}
</script>
2、src/components/Test.vue
<template>
<div>
来自子组件:Test.vue
{{a}}+{{b}}={{calc()}}
<button @click="backtoindex()">返回</button>
</div>
</template>
<script>
export default{
data(){
return{
a: 10,
b: 20,
c: null
}
},
methods:{
calc(){
return(this.a+this.b);
},
backtoindex(){
this.$router.replace({path:'/'}) //跳转至指定路由
}
}
}
</script>
3、src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
//以下引入两个组件
import Index from '@/components/Index.vue'
import test from '@/components/Test.vue'
Vue.use(Router)
export default new Router({
mode:"history",
base:"test",
//以下设置路由及其对应的组件
routes: [
{
path: '/',
name: 'Index',
component: Index
},
{
path:'/test',
name:'test',
component:test
}
]
})
4、src/App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
5、src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios' // 引入axios
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://127.0.0.1/test/php/' //这是后端程序路径的前缀
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
6、效果截图
开发完成后可执行build
cd test
npm run build
项目目录中生成dist目录,将dist目录下所有文件复制到www/test/目录下即可。
开发模式运行效果:
部署到apache后运行效果(注意url)
将www/test下的所有文件复制到生产服务器中即可。