vue项目开发完成之后 需要把代码部署到web服务器上,此处以Nginx为例
- 找到你的项目目录,执行以下代码 npm run build 对vue项目进行打包,没有问题的话,会提示 Build complete.
[root@izm5e331c21uktboqzfrvqz likang-demo]# npm run build
> likang-demo@1.0.0 build /data/wwwroot/vue/likang-demo
> node build/build.js
⠸ building for production...
Build complete.
- 代码打包完成之后,默认放在dist目录下
[root@izm5e331c21uktboqzfrvqz likang-demo]# ll dist
total 8
-rw-r--r-- 1 root root 513 May 19 22:35 index.html
drwxr-xr-x 4 root root 4096 May 19 22:35 static
- 拷贝dist目录下到文件到一个nginx可以访问的目录下,设置一个域名可以访问即可
# 在data/wwwroot/default的目录下
cp -r dist /data/wwwroot/default
- 配置nginx,可以访问到该目录下,具体配置如下
[root@izm5e331c21uktboqzfrvqz dist]# vim /usr/local/nginx/conf/conf.d/www.phpclub.top.conf
server {
listen 80;
server_name www.phpclub.top;
access_log /data/wwwlogs/access_nginx.log combined;
root /data/wwwroot/default/dist;
autoindex on;
index index.html index.htm index.php;
#error_page 404 /404.html;
#error_page 502 /502.html;
location /nginx_status {
stub_status on;
access_log off;
allow 127.0.0.1;
deny all;
}
location /api/ {
#rewrite ^/api/(.*)$ http://1908api.phpclub.top/$1;
proxy_pass http://1908api.phpclub.top/;
}
location ~ [^/]\.php(/|$) {
#fastcgi_pass remote_php_ip:9000;
fastcgi_pass unix:/dev/shm/php-cgi.sock;
fastcgi_index index.php;
include fastcgi.conf;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
expires 30d;
access_log off;
}
location ~ .*\.(js|css)?$ {
expires 7d;
access_log off;
}
location ~ ^/(\.user.ini|\.ht|\.git|\.svn|\.project|LICENSE|README.md) {
deny all;
}
}
注意:
这个地方因为vue要调用接口,需要给接口设置代理,让他可以找到我们的api接口,在开发时候不同,可以通过设置index.js 即可代理到服务器,在项目实际上线的时候,必须通过nginx的代理或者是重写去实现请求接口。
(1) 在vue中写的接口地址为 api/getProductList
(2)在Nginx中会判断是否是api相关的请求
(3)如果是api相关的请求,会把请求转发到 http://api.phpclub.top/ 下
location /api/ {
#rewrite ^/api/(.*)$ http://api.phpclub.top/$1;
proxy_pass http://api.phpclub.top/;
}