很多站长朋友们都不太清楚phpvuedist，今天小编就来给大家整理phpvuedist，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 前端vue与后端Thinkphp在服务器的部署 2、 一个服务器可以同时部署api和网站吗 3、 本地运行vue dist文件 4、 vue项目启动后访问的是dist吗 5、 用webpack打包的vue项目后生成的dist文件有什么用，如何使用 前端vue与后端Thinkphp在服务器的部署vue在服务端部署时，我们都知道通过npm run build 指令打包好的dist文件，通过http指定是可以直接浏览的，Thinkphp通过域名指向index.php文件才可以浏览。要使前端正常调用后端数据，有两种方法：1、前端跨域调用后端数据，2、前端打包文件部署在后端的服务器文件夹下（同域）。
web服务器： apache
一、跨域
在服务器配置站点：
在路径/home/www/??下创建test项目文件夹，用来放项目文件。??
找到httpd-vhosts.conf文件配置站点??
前端站点：??
????ServerName?test.test测试数据??
????DocumentRoot?"/home/www/test/dist"????
????DirectoryIndex?index.html??
后端站点：??
????ServerName?test.testphp测试数据??
????DocumentRoot?"/home/www/test/php"????
????DirectoryIndex?index.php??
将前端打包好的dist文件放在/home/www/test/ 文件夹下，运行可浏览，当路径改变时，刷新会出现404错误。此时dist文件下创建一个.htaccess文件，当路径不存在时，路径指向能解决此问题。
??RewriteEngine?On??
??RewriteBase?/??
??RewriteRule?^index\.html$?-?[L]??
??RewriteCond?%{REQUEST_FILENAME}?!-f??
??RewriteCond?%{REQUEST_FILENAME}?!-d??
??RewriteRule?.?/index.html?[L]??
在/home/www/test文件夹下创建项目根目录php文件夹，将thinkphp文件放在php下。TP5的入口文件在public文件下，在这将public下的入口文件index.php挪到php文件夹下（个人习惯将入口文件放在项目根目录）, 后端绑定Index模块。
前端调用后端接口，存在跨域，跨域解决方法有好几种，在这我将在后端php做配置，解决跨域问题，在公用控制器设置跨域配置：
class?Common?extends?Controller??
{??
????public?$param;??
????//?设置跨域访问??
????public?function?_initialize()??
????{??
????????parent::_initialize();??
????????isset($_SERVER['HTTP_ORIGIN'])???header('Access-Control-Allow-Origin:?'.$_SERVER['HTTP_ORIGIN'])?:?'';??
????????header('Access-Control-Allow-Credentials:?true');??
????????header('Access-Control-Allow-Methods:?GET,?POST,?PUT,?DELETE,?OPTIONS');??
????????header("Access-Control-Allow-Headers:?Origin,?X-Requested-With,?Content-Type,?Accept,?authKey,?sessionId");??
$param?=??Request::instance()->param();??
$this->param?=?$param;??
????}??
}??
前端调用登录接口： this.axios.post('', {user: '', password: ''})。
(可在webpack.base.conf.js文件下可定义接口：)
二、同域
后端配置同上，公共配置器中的header配置注释。将前端的dist文件下的所有文件（包含.htaccess），放在php文件夹下。将后端index控制器的index方法的路径重定向php下的index.html文件：
namespace?app\index\controller;??
use?think\Controller;??
class?Index?extends?Controller??
{??
????public?function?index()?{??
$this->redirect('/index.html');??
????}??
}??
前端调用登录接口： this.axios.post('/index.php/base/login', {user: '', password: ''})
转自：
一个服务器可以同时部署api和网站吗可以。安装完phpstudy后会在安装目录下生成一个WWW的文件夹，这里就是放置网站的地方。将Vue生成的dist文件夹直接复制到这个文件夹可以了。
本地运行vue dist文件当我们vue工作完成以后会打包一份dist文件给后台，之前本地肯定要测试一下，下面就是本人踩的一些坑，跟大家分享一下
a) 我们打包为dist以后第一个问题，我们打包为dist以后经常会遇见路径出错，也就是dom出现但是js与css不会出现，显示路径错误。
解决方法：打开脚手架的config文件中的index.js文件，查看build对象内的assetsPublicPath(发布路径)是否为"./"。默认的情况下是"/"，但是"/"是绝对路径，而"./"是相对路径
绝对路径：就是你的主页上的文件或目录在硬盘上真正的路径，比如c:/apache/cgi-bin下的路径就是c:/apache/cgi-bin;
相对路径：顾名思义就是相对于当前文件的路径
b)路径没有问题了。文件可以引入进来了，那么怎么本地运行呢，因为dist文件是要有服务启动的，一本情况下后台会启动服务，但是总不能每一次都让后台打包吧
解决方法：
? 1.这是dev内设置服务代理，
proxyTable: {
? ? ? '/api': {? //代理地址
? ? ? ? target: '',? //需要代理的地址
? ? ? ? changeOrigin: true,? //是否跨域
? ? ? ? secure: false,? // 如果是https接口，需要配置这个参数
? ? ? ? pathRewrite: {
? ? ? ? ? ? '^/api': '/api'? //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
? ? ? ? },
? ? ? },
? ? },
2.配置开发环境与生产环境
在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST
module.exports = merge(prodEnv, {
? NODE_ENV: '"development"', // 开发环境
? API_HOST: '"/api/"'
})
module.exports = {
? NODE_ENV: '"production"', // 生产环境
? API_HOST: '""'
}
3.调用
created() {
????console.log(process.env.NODE_ENV, '环境')
????let urlHost = process.env.API_HOST // 会自动判断当前是开发还是生产环境，然后自动匹配API_HOST
? ? ?axios.get(urlHost + 'DemoApi/oftenGoods.php')
????.then((res) => {
????????console.log(res, '代理之后')
????})
}
好了，就这么多配置本地运行dist文件的方法大家git到了吗
vue项目启动后访问的是dist吗您好，是的，Vue 项目启动后访问的是 dist 目录。Vue 是一个构建用户界面的框架，它的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 项目启动后，会在 dist 目录下生成一个文件，这个文件就是用户访问的文件，它包含了所有的前端静态资源，如 HTML、CSS、JavaScript 等，用户可以通过访问这个文件来访问 Vue 项目。
用webpack打包的vue项目后生成的dist文件有什么用，如何使用将打包好的dist文件扔到服务器上的Tomcat---》webapp下，打开浏览器访问服务器的网址加端口号项目名 例：
关于phpvuedist的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。