vue怎么获取本机ip(本地ip)

时间：2023-10-28 19:51:05 浏览量：67

ps：昨天说了个 Linux 部署 node环境，再玩个小项目的文章，前端页面用的是vue，实际开发中，像管理后台，经常是vue nginx组合，不必要用到node做转发，方便快速，学习成本低，今天我们就来先学习怎么用nginx部署vue项目。

npm install -g vue-cli

vue init webpack projectName // projectName 自己取项目名

它会提示你输入项目名，要不要装些包之类的，根据提示选择即可

cd projectName

npm run dev

然后浏览器输入localhost:8080，便可以看到效果

这里我们可以发现一个小问题，IP访问是不行的，如果想改成IP也能访问，我们需要在config/index.js文件将host修改为0.0.0.0即可。

现在我们写几个小页面

我们可以看到，这里是hash模式，不好看，这个我们先跳过，先把项目部署上服务器

npm run build 打包文件，然后把dist文件夹里面的文件放服务器 /usr/local/src/你的文件夹名（我这里写的superip1），端口这里设的91

然后新建xx.conf文件，输入

server {

listen 91;

server_name localhost;

location / {

root /usr/local/src/superip1; #superip1是刚放的文件夹

index index.html;

}

重启nginx，好了，可以访问了

上面提到很丑的hash，现在我们来改成hostory模式，先在router里面加一句

mode: 'history'

config/index.js文件

assetsPublicPath: '/'

好了，重新打包，放服务器，我这里新建文件夹superip2，新建xx.conf文件，写入

server {

listen 92;

server_name localhost;

location / {

root /usr/local/src/superip2;

index index.html;

try_files $uri $uri/ /index.html = 404;

error_page 404 /index.html;

}

端口设的92，继续重启nginx，浏览器输入http://ip:92/test1，可以看到 #去掉了

我们刚才设置的是一级域名，如果二级域名配置vue history模式，要修改以下几个地方，比如你的二级域名叫second，在router页面加

base: 'second'

在config/index.js页面改assetsPublicPath

然后新建xx.conf文件

# 这个是项目路径配置

server {

listen 93;

server_name localhost;

location /second {

root /usr/local/src/superip3;

index index.html;

try_files $uri $uri/ /index.html = 404;

error_page 404 /index.html;

}

# 这个是静态资源配置，对应上面assetsPublicPath

server {

listen 94;

server_name localhost;

location /resource {

alias /usr/local/src/superip3;

}

重启nginx，可以看到，二级域名方式也可以访问了

ps：上面配置二级域名，静态资源css,js等的路径也有另一种方式，

assetsPublicPath 继续设为 '/'

xx.conf输入

# 这个是项目路径配置

server {

listen 93;

server_name localhost;

location /second {

root /usr/local/src/superip3;

index index.html;

try_files $uri $uri/ /index.html = 404;

error_page 404 /index.html;

}

# 如果要把静态资源js,css,img等放根目录下，那么写下面这句话，并设置assetsPublicPath为'/'

location ~ .*\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt)$ {

root /usr/local/src/superip3;

}