云服务器运行vuedist
⑴ Vue本地项目过程随笔(4) 部署到服务器
服务器购买，端口开放不再多讲 文件的上传使用 Xftp 。
工作经历内容用到的 省略号特效
本地Vue项目打包,生成文件放在Vue项目目录下的dist文件夹
在阿里云服务器控制台内安装nodejs，端口开放在防火墙选项下
安装nginx
npm install命令遇到relocation error: npm: symbol SSL_set_cert_cb的报错问题
改标签栏icon，以及标签名
安装完nginx后 用Xftp登陆服务器，上传打包好的项目。
保存，回到服务器控制台输入 重新运行nginx
现在可以通过ip地址访问到打包过的Vue项目了
我的项目链接: http://phantomcorner.tech
Github
⑵ vue-cli + webpack 打包后的dist文件怎么在服务器中运行
使用nginx，借鉴网页链接
⑶ 本地运行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: 'http://39.104.50.205', //需要代理的地址
changeOrigin: true, //是否跨域
secure: false, // 如果是https接口，需要配置这个参数
pathRewrite: {
'^/api': '/api' //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
},
},
},
2.配置开发环境与生产环境
在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST
mole.exports = merge(prodEnv, {
NODE_ENV: '"development"', // 开发环境
API_HOST: '"/api/"'
})
mole.exports = {
NODE_ENV: '"proction"', // 生产环境
API_HOST: '"http://xxx.com/"'
}
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到了吗
⑷ vuejs怎么在服务器部署
既然是布署，哪默认就应该是生产环境下的布署，vue开发的应用本质上就是静态文件,无论你用何种web服务器，放上去就应该能通过http访问
接下来我来帮大家来捋一捋
首先VUE 是一个javascript的前端框架，注定了它是运行在浏览器里的，对服务器本地没有任何要求，只要一个静态文件服务器能通过http访问到其资源文件就足矣！无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器，也用不了多少行代码。
npm run dev 是用来在本地开发的时候做调试用的，vue开发的是前端的东西，不是nodejs 服务端程序，按道理讲，生产环境里就不该存在npm，甚至nodejs也不需要（用nodejs来做web静态服务的除外），楼主通过ssh进入到服务器里，再运行npm run dev 来启动哪是开发机上做的事情。正确的做法很简单，通过npm run build 把生成的dist文件夹（不要上传文件夹）里的内容上传到http服务器上就可以通过 http来访问了，开发机上正常，上传以后 程序出现错误不能运行的原因99.99%的可能性是你引用资源的路径有问题。
一般如果vue框架的程序上传到网站服务器的根目录下是不 会有问题的，也不存在资源文件引用错误的情况，但如果你不是根目录，就会有问题，通过vue-cli 生成的开发目录，build以后默认引用资源文件的路径是
有更多疑问 ”可以咨询 ”小鸟云，它是的一家服务器厂商，我一直在用他们产品！
⑸ vue项目部署iis服务器
一、将vue项目进行打包编译后，根目录生成dist的文件
当出现如上图显示时，说明打包编译完成，已经生成dist文件
二、打开iis服务器
打开iis服务器后选中【网站】后右击选【添加网站】，就可对网站进行配置，物理路径选择编译后的dist文件夹后选确定就行。
三、右击选择【启动】后出现如下报错信息：
除非Windows Activation Service (WAS)和万维网发布服务(W3SVC)均处于运行状态，否则无法启动网站
解决：
打开命令提示符中输入services.msc ,打开服务。
找到windows install及word wide web发布服务选项，分别右击启动，并右键属性改为启动类型就可以。
这是重新启动下，就可以访问。
⑹ vue项目如何部署到服务器
第一步配置 vue.config.js
第二步修改路由，改为 hash模式
第三步文件打包,执行以下，目录中会出现一个dist文件夹，将文件拖到服务器的 root 文件夹中
第四步可以通过域名进行访问 http://www.linlin.run/my-project/index.html#/home
⑺ 如何打包vue项目加node.js后端到云服务器
在命令行输入npm run build:prod，等待打包完成
项目目录下就会多出一个dist文件夹，里面有index.html文件和static文件夹，
直接上传到服务器上就行了
⑻ 前端vue与后端Thinkphp在服务器的部署
vue在服务端部署时，我们都知道通过npm run build 指令打包好的dist文件，通过http指定是可以直接浏览的，Thinkphp通过域名指向index.php文件才可以浏览。要使前端正常调用后端数据，有两种方法：1、前端跨域调用后端数据，2、前端打包文件部署在后端的服务器文件夹下（同域）。
web服务器： apache
一、跨域
在服务器配置站点：
在路径/home/www/ 下创建test项目文件夹，用来放项目文件。
找到httpd-vhosts.conf文件配置站点
前端站点：
ServerName test.test.com
DocumentRoot "/home/www/test/dist"
DirectoryIndex index.html
后端站点：
ServerName test.testphp.com
DocumentRoot "/home/www/test/php"
DirectoryIndex index.php
将前端打包好的dist文件放在/home/www/test/ 文件夹下，运行http://test.test.com可浏览，当路径改变时，刷新会出现404错误。此时dist文件下创建一个.htaccess文件，当路径不存在时，路径指向http://test.test.com/index.html能解决此问题。
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('http://test.testphp.com/index.php/base/login', {user: '', password: ''})。
(可在webpack.base.conf.js文件下可定义接口：http://test.testphp.com/index.php/)
二、同域
后端配置同上，公共配置器中的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: ''})
转自：https://blog.csdn.net/qq_35465132/article/details/78986675
⑼ 用webpack打包的vue项目后生成的dist文件有什么用，如何使用
将打包好的dist文件扔到服务器上的Tomcat---》webapp下，打开浏览器访问服务器的网址加端口号项目名 例：http://192.168.1.8:81/test/
⑽ 怎么把VUE项目部署到服务器上面
1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下）
[plain]view plain
cd/etc
apt-getupdate
apt-getinstallnginx
vim/etc/nginx/nginx.conf
userwww-data;
worker_processesauto;
pid/run/nginx.pid;
events{
worker_connections768;
#multi_accepton;
}
http{
##
#BasicSettings
##
tcp_nodelayon;
keepalive_timeout65;
types_hash_max_size2048;
#server_tokensoff;
#server_names_hash_bucket_size64;
#server_name_in_redirectoff;
include/etc/nginx/mime.types;
default_typeapplication/octet-stream;
##
#SSLSettings
##
ssl_protocolsTLSv1TLSv1.1TLSv1.2;#DroppingSSLv3,ref:POODLE
ssl_prefer_server_cipherson;
##
#LoggingSettings
##
access_log/var/log/nginx/access.log;
error_log/var/log/nginx/error.log;
##
#GzipSettings
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_comp_level6;
#gzip_buffers168k;
#gzip_http_version1.1;
##
#VirtualHostConfigs
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_comp_level6;
#gzip_buffers168k;
#gzip_http_version1.1;
#gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;
##
#VirtualHostConfigs
##
include/etc/nginx/conf.d/*.conf;
include/etc/nginx/sites-enabled/*;
#以下为我们添加的内容
server{
listen80;
server_nameyour-ipaddress;
root/home/my-project/;
indexindex.html;
location/datas{
rewrite^.+datas/?(.*)$/$1break;
includeuwsgi_params;
proxy_passhttp://ip:port;
}
}
}
assetsPublicPath:'/test1/',
exportdefaultnewRouter({
base:'/test1/',//添加这行
linkActiveClass:'active',
routes
});
consturl='/datas/seller';
this.$http.get(url).then((response)=>{
.....
});
servicenginxstart
2.首先先配置nginx，然后再根据配置文件做下一步操作
打开/etc/nginx/nginx.conf文件
[plain]view plain
在nginx.conf中配置如下：
[plain]view plain
接下来就根据配置文件进行下一步工作。配置文件中的server_name后面是阿里云服务器的ip地址
3.配置文件中的listen是nginx监听的端口号，所以需要在阿里云服务器上为80端口添加安全组规则
在本地的浏览器登录阿里云服务器->进入控制台->点击安全组->点击配置规则->点击添加安全组规则，之后配置如下（注：入方向和出方向都要配置）
4.配置文件中的root和index那两行表示我们把项目文件夹放在/home/my-project下
例如有两个项目文件夹分别为test1，test2，里面都有index.html。则目录结构如下
/home
|--my-project
|--test1
|--index.html
|--test2
|--index.html
则在浏览器输入http://ip/test1/index.html
服务器便会在/home/my-project中找到test1下的index.html执行；
如果在浏览器中输入http://ip/test2/index.html
服务器便会在/home/my-project中找到test2下的index.html执行；
这样便可以在服务器下放多个项目文件夹。
5.所以我们也需要在本地项目的config/index.js里的build下进行修改,如果要把项目放到test1下，则
[javascript]view plain
如果用到了vue-router，则修改/router/index.js
[javascript]view plain
6.nginx配置文件中的location则是针对跨域处理，表示把对/datas的请求转发给http://ip:port,本文中这个http://ip:port下就是需要的数据，例如http://ip:port/seller,在本地项目文件中ajax请求数据的地方如下
[javascript]view plain
7.修改后在本地命令行下运行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上传到服务器的/home/my-project/test1下，目录结构如下
/home
|--my-project
|--test1
|--index.html
|--static
8.启动nginx
[plain]view plain
9.至此项目部署成功，在浏览器下输入: http://ip/test1/index.html 即可