vue npm 实现本地开发并部署到本地Webserver的方法

尝试在本地开发并部署到本地的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下的所有文件复制到生产服务器中即可。