关于vue打包到服务器的问题

一、NodeJs本地搭建服务器，模拟接口请求，获取json数据

1、express 创建一个简单的项目

安装node
全局模式安装：npm install -g express
执行该命令后会在C:\Users\Administrator\AppData\Roaming\npm下生成一个node_modules目录
npm install -g express-generator
此时再次执行express --version
成功输出express框架当前安装的版本号，证明你安装成功。
复制代码

2、下面来建立第一个工程

首先进入到你当前准备创建工程的位置下，执行：express --view=ejs shop
--view=后面填的是当前框架使用的模板，shop代表当前文件夹的名称
复制代码

先到shop文件夹下面安装依赖：npm install
这样会将package.json文件中 dependencies 依赖列表中,即可自动安装依赖列表中所列出的所有模块。

然后执行命令则为：npm start（或者是node bin\www）。
此时访问http://127.0.0.1:3000/
复制代码

3、放入

将打包好的dist文件下的所有文件放入 新建的shop下面的public下面 （我的路径G:\vue\shop\public）
刷新http://127.0.0.1:3000/
复制代码

4、成功（听说路径会有点小问题，但是我的路径没有问题，只是路由有点问题，然后放在服务器上改点东西就好了）

二、Linux系统

1、将打包好的文件拖入服务器文件（你以为这就好了？你想多了）

你会看到403,403，403,403，403,403，403,403，403,403，403,403，烦躁

可能是nginx.conf里的配置的文件夹 权限不够 chmod -R 755 //usr/local/web/（这个是放置打包好的文件的地方）

   
    //如果不行这下就得配置点东西了Nginx
   /usr/local/nginx/sbin/nginx -v
   nginx version: nginx/1.10.1//这个一般后台会配置好
   # vim /usr/local/nginx/conf/nginx.conf 查看Nginx配置文件
    
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/local/web;//这个就是放置static文件夹和index.html文件的文件夹
            index  index.html index.htm;
        }
    }
    然后重新再入配置并启动
    /usr/local/nginx/sbin/nginx -s reload            # 重新载入配置文件
    /usr/local/nginx/sbin/nginx -s reopen            # 重启 Nginx
    --------------------- 
   复制代码
   

2、基本成功了（好像路由还有点问题，不信你试试）

//我去！部分页面404,404,404 是因为路由里面的路径nginx不认识
参考 https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
//继续改上面的/usr/local/nginx/conf/nginx.conf的文件（个人觉得下载个FlashFXP直接找到这个文件打开编辑）
server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;
	 root   /usr/local/web;//这个是原先location下面的
	 index  index.html;//这个也是
	location / {
         try_files $uri $uri/ @router;
         index index.html;
     }

    location @router {
        rewrite ^.*$ /index.html last;
    }
}
//记得重新再入配置并启动Nginx
复制代码

3、好了，有什么问题我发现了还会写的

转载于:https://juejin.im/post/5cde109df265da038b20418c