vue-cli项目部署到nginx学习笔记

相关命令行：

查看nginx进程：ps aux | grep nginx;

查看nginx的安装位置：whereis nginx;

vue-cli 打包 部署

IIS

nginx

less

rem

------------------------------------

router

安装vue项目：

0. npm install vue-cli -g

1. vue  init webpack  本地工程名称

2. npm run dev

    npm run build

Home.vue

News.vue

Apache:

在项目根目录里面

.htaccess

<IfModule mod_rewrite.c>

  RewriteEngine On

  RewriteBase /

  RewriteRule ^index\.html$ - [L]

  RewriteCond %{REQUEST_FILENAME} !-f

  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule . /index.html [L]

</IfModule>

nginx:

gcc-c++

ps aux | grep nginx 查看进程

whereis nginx 查看nginx安装地儿

安装nginx:

yum install nginx 安装稀碎，后期如果想配置，简直要死

源码 √

1. wget -c http://nginx.org/download/nginx-1.13.8.tar.gz

2. 解压

    tar -zxvf nginx -1.xxxx

3. 切入目录里面 配置

    ./configure 使用默认配置

4. 编译、安装

    make && make install

5. 启动nginx

    cd /usr/local/nginx/sbin

./nginx 启动nginx

打包压缩 zip

rz ...

unzip  xxxx

让vue项目能看到:

简单配置 nginx.conf

cd /usr/local/nginx/conf

重启nginx:

记得切到sbin里面

./nginx -s reload

SPA项目：

记得配置 rewrite:

try_files $uri $uri/ /index.html;

-----------------------------------------------------------

vue手机:

1. rem

px2rem-loader

build/utils.js

cssLoaders:

const px2remLoader = {

    loader: 'px2rem-loader',

    option:{

      remUnit:40

    }

  }

应用:

2. 手机端测试

必须访问电脑ip地址， 确保手机和pc处于同一个网段

config/index.js

host:'0.0.0.0',

disableCheckHost:true   这句话不必要加

51mmr.net/vue/xxxx