精华内容
下载资源
问答
  • Vue部署到Nginx

    2021-09-10 10:43:18
    1.打包Vue项目,在项目路径下执行: npm run build 打包完成后会在项目路径下生成dist文件夹 2.将dist文件夹上传至服务器上,如/usr/local/项目...//这里是vue的配置信息说明,需要加在nginx配置文件, /* con

    1.打包Vue项目,在项目路径下执行:

    npm run build

    打包完成后会在项目路径下生成dist文件夹

    2.将dist文件夹上传至服务器上,如/usr/local/项目名称

    3.编辑Nginx的配置文件:

    
    location /项目名称 {
    	alias /usr/local/项目名称/dist;
    	try_files $uri $uri/ /index.html;    //不加这一句,刷新404
    }
    
    
    
    //这里是vue的配置信息说明,不需要加在nginx配置文件,
    /*
    const router = new VueRouter({
    	mode: 'history',
    	base: '/项目名称', // 基础路径
    	routes
    })
    */
    //由于Vue项目中配置了以上基础路径,因此若想要/根路径能访问到,就需要增加
    location /   {
    	rewrite ^/(.*)$ /项目名称/$1 last;  
    }

    展开全文
  • vue3中编译代码前需要在vue.config.js配置根路径,这样便可以正常页面。 例如,要访问的地址为http://www.test.com/myapp,需要配置 module.exports = { publicPath: "/myapp/", outputDir: 'dist',// 编译后文件...

    我的设置:

    vue3中编译代码前需要在vue.config.js配置根路径,这样便可以正常页面。

    例如,要访问的地址为http://www.test.com/myapp,需要配置

    module.exports = {
      publicPath: "/myapp/",
      outputDir: 'dist',// 编译后文件目录
    };
    

    将编译后的文件夹dist上传到服务器的nginx/html/myapp目录下,

    出现问题:

    当访问到http://www.test.com/myapp/login会导致页面404

    解决办法:

    • 1.配置nginx.conf
       try_files $uri /oauth/index.html;
    
    • try_files检索文件是否存在,先检查$uri,如果不存在对应的文件则转到/oauth/index.html目录下
    • $uri是nginx内置命令,如果访问http://www.test.com/myapp/login,则$uri='/myapp/login'

    副作用:
    配置后会导致nginx内部的404.html,需要在vue.comfig.js中自己配置``{path: ‘*’}

    const router = new VueRouter({
      routes: [
      	// * 表示所有路径,注意这个配置要放在最下面
        { path: '*', component: NotFund }
      ]
    })
    

    参考文献:

    展开全文
  • 本博客是总结本人在linux服务器上将vue项目部署到Nginx上的经历 一.准备好vue项目 1.安装vue环境 这部分参考我上篇的博客 https://blog.csdn.net/rongqwe/article/details/111990401 2.打包vue项目 进入你项目的...

    本博客是总结本人在linux服务器上将vue项目部署到Nginx上的经历

    一.准备好vue项目

    1.安装vue环境

    这部分参考我上篇的博客
    https://blog.csdn.net/rongqwe/article/details/111990401

    2.打包vue项目

    进入你项目的文件夹,找到config文件夹下的index.js文件(config/index.js),打开修改里面assetsPublicPath为 ./(注意一定是build里面的,dev中也有这个配置,dev里的不用修改)
    在这里插入图片描述

    3.打包成dist文件

    进入项目文件夹,打开命令行输入

    npm run build
    

    这时就可以看到文件夹下有个dist文件了,然后把dist丢到服务器上,这里我用xftp丢上去的
    在这里插入图片描述

    二.在服务器配置Nginx

    1.安装Nginx

    直接用apt就可以安装了,在linux命令行输入

    sudo apt-get install nginx
    

    安装后通过输入nginx -v 可测试是否安装成功
    输入

    service nginx start
    

    可以启动Nginx服务。
    启动后,在网页重输入你服务器ip地址,就可看到Nginx的初始页面。这样nginx安装成功啦
    在这里插入图片描述

    2.修改nginx的配置文件

    进入默认的配置文件路径,修改。
    可通过如下命令修改,也可以通过xftp找到该文件修改的,这样个人感觉比较方便

    vim /etc/nginx/nginx.conf 
    

    在 http{ } 中配置一个server如下
    在这里插入图片描述

    注意:跨域问题还是要注意的,如果nginx不进行跨域的配置,虽然项目部署了,也还是访问不了。具体看这个博主的博客https://blog.csdn.net/weixin_42565137/article/details/90578780

    3.开放端口

    你项目的端口记得要开放,比如我这里8080端口记得要开放,不然访问不了的啊!!我曾经就是漏了这个弱智操作搞了我好久,具体如何开放端口自己百度吧,不过一些基本的端口,服务器还是默认会自动开放的。

    三.访问你的vue项目

    然后重启nginx,命令行输入 service nginx restart
    现在就应该大功告成啦,在浏览器输入 ip:端口号 ,就可以访问到你的vue项目啦。

    展开全文
  • vue项目部署到nginx

    万次阅读 多人点赞 2019-05-26 17:09:15
    最近产品做了一半,要求将前端的代码部署到服务器,以前没有部署过,这可咋办呀~~。现在部署好了,给大家总结以下,里面还是有很多坑的

    一.vue项目打包

    1. 修改config/index.js的assetsPublicPath为 ./(注意一定是build里面的,下面dev中也有这个配置)
      ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190526172551783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU2NTEzNw==,size_16,color_FFFFFF,t_7
      这个路径的配置很重要,默认是项目名称。如果没有修改路径会变成这样,访问不到打包后的文件。就算返回200,你会发现返回的根本不是那些打包后的文件。
      在这里插入图片描述
    2. 打包成dist文件
    npm run build
    

    这时我们就可以把生成的dist文件扔到服务器就可以了。我这里使用xshell进行远程连接,xftp进行文件传输。

    二.配置nginx

    1. 安装nginx
      安装的步骤我这里不详细介绍,安装后通过nginx -v 可测试是否安装成功

    2. 修改nginx的配置文件
      默认路径:

    vim /etc/nginx/nginx.conf 
    

    在 http{ } 中配置一个server

    server {
                  listen 8080;     #1.你想让你的这个项目跑在哪个端口
                  server_name 47.94.76.91;     #2.当前服务器ip
           location / {
               root   /home/dist/;     #3.dist文件的位置(我是直接放在home目录下了) 
                try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写)
           }
            location /api {  #4.当请求跨域时配置端口转发
                proxy_pass http://47.92.76.97:8848/api; #5.转发地址
            } 
           }
    
    

    跨域问题在这里着重说一下:

    1. 这里的跨域配置是打包后,nginx做的代理转发。在开发模式的proxytable没有任何关系。
    2. 如果nginx不进行跨域的配置,虽然项目部署了,但是服务根本就会访问不到
    3. 关于跨域的介绍可以看我的另外一篇文章 https://blog.csdn.net/weixin_42565137/article/details/90578780

    三.开放端口

    像阿里云的服务器都需要开通端口才可以访问的。这个不做详细介绍。
    然后我们重启nginx就可以访问我们部署的项目了 service nginx restart

    展开全文
  • 先贴nginx配置 #nginx作为服务器需要的配置 location /miniprogram { root D:/nginx/html/miniprogram; index index.html; try_files $uri $uri/ /index.html; } 这段配置就是简单的指向index首页和静态文件...
  • ps -ef | grep nginx //nginx启动否? netstat -a | grep 80 //80端口开放否? firewall-cmd --list-all //看看防火墙开了80? firewall-cmd --add-service=http --permanent firewall-cmd --add-port=80/...
  • 开发完的vue项目,需要部署到Nginx/Tomcat服务器上运行,作为一个前端小白,刚接触vue不久,研究了一番,于是写下这篇文章,记录下来便于今后部署。 1.router(history)模式vue项目部署到nginx 1)修改router模式为...
  • vue项目部署到nginx

    2020-08-11 16:28:22
    vue项目部署到nginx上 将vue项目打包 npm run build 打包成功后会在项目的根目录下面生成一个dist文件夹,所有的资源文件都会放在这个文件夹下面。 2. 下载并安装nginx,选择你需要的版本进行下载 nginx下载网址...
  • 我项目中设置vue路由为history模式,项目就会少了地址栏的#号,比较美观,同时也会...部署到nginx后会存在刷新404的问题。所以想用好该模式需要后端配合。官网有说明的 nginx的配置 修改nginx的location配置...
  • Vue-cli项目在本地 使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后,通过访问是无法加载出来样式的。 于是乎,在网上开始寻找...
  • vue项目部署到nginx和node服务器 一.前序工作 1.使用npm run build将vue项目生成浏览器可以识别的html js等资源,存放在dist目录下,(npm run build命令执行的是当前项目下的package.json文件中scripts中的脚本命令) ...
  • Vue前端部署到nginx

    2020-06-29 15:08:55
    部署linux服务器ip 2、部署环境 版本:Nginx 1.13.7 /usr/local/nginx LINUX安装nginx详细步骤 1.安装依赖包 //一键安装上面四个依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 2.下载...
  • vue-cli打包到部署到nginx服务器 最近公司把云平台产品用vue 前后端分离的框架来写,前面大部分开发都比较顺利,后面打包部署出了bug 现在记录下自己遇到的哪些坑 1,我直接npm run build&...
  • <p style="text-align:center"><img alt="" src=...<p>nginx为https页面,boot接口是http接口,和这个有关系吗?如果有关系,应该如何解决这个问题呢?</p>
  • 大概是脑袋抽抽了吧,某个那么清醒的下午,对,就是昨天下午,我萌生了想要将之前写的一个vue项目部署到nginx上的这个想法。然后就一发不可收拾地开始bug-debug的过程。现将实现过程遇到的各种错误总结一下,希望...
  • vue-cli3:首先在项目根目录创建一个vue.config.js文件;添加如下内容: module.export = { publicPath:'./' } 2、nginx服务器安装 百度下载,解压即可,默认端口为80 3、部署vue打包后的dist文件夹放在...
  • vue项目通过nginx部署访问js,css等静态资源404,可尝试更改vue.config.js中publicpath:"./" 默认为’/’ 再次运行npm run build 我这边这样解决了
  • 我的项目前后端分离部署,后台已经配置过cors,但前端访问静态页面没有问题,一旦发请求访问后台服务器时就出现跨域 如何解决,有大佬帮忙吗? 1.前端访问时: 前端项目部署准备用nginx跨域 配置为: ...
  • Vue 项目中main.js axios.defaults.baseURL = '/api'; config/index.js build块中 assetsPublicPath: './', proxyTable: { '/api': { target: 'http://127.0.0.1:8081/ABC', //ABC是tomcat后端项目,端口为...
  • vue项目部署到Nginx中遇到的两个问题 经过查阅,成功解决问题。 部署到服务器后Element UI图标显示的问题 原因:查看 /build/webpack.base.conf.js 文件,可以发现woff 或 ttf 这些字体会经由 url-loader 处理...
  • 项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上。对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache、Nginx和Tomcat 。Nginx是一...
  • Vue 项目,作为web开发新秀,深得大家的喜欢,对于Android开发者兼做web 项目来说,着实是一个很好的框架, 项目框架 Vue + element Vue 项目打包 再package.json中配置打包项目 "scripts": { // dev 本地环境运行 ...
  • Vue-cli项目在本地 使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后,通过访问是无法加载出来样式的。 于是乎,在网上开始寻找...
  • vue项目部署到nginx(超级详细) 系统:ubuntu20 安装nginx: 可以先创建一个nginx目录,我的目录在 /usr/local/nginx下 一、安装nginx 1. 安装依赖 $ sudo apt-get install gcc zlib1g-dev libpcre3 libpcre3-dev ...
  • vue安装+部署到nginx

    2021-09-21 01:36:45
    本章讲述windows系统如何安装vue并且配置到nginx环境下 一、安装nodejs 官网:Node.js 下载完成后需要记住安装的路径,其余直接下一步即可 我安装的路径是D:\nodejs 二、设置node_global和node_cache 1.在安装...
  • 我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解。 1、先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,176
精华内容 2,470
关键字:

vue部署到nginx访问不到js

vue 订阅