2022 年春運首日火車票明日開售,1 月 17 日可買除夕當日車票
阿新 • • 發佈:2022-01-02
一、nginx部署Vue專案
前提條件是已經搭建好了nginx的環境,nginx預設的埠是80。其實我們知道,vue專案預設的埠是
8080,這個預設的埠這部分就不需要特殊的處理。我的整體vue的專案目錄結構如下:
1.1、修改vue的配置
在vue的專案中,找到vue.config.js,在這地方新增整體的路徑,具體檔案的內容資訊如下:
//強制關閉js的檔案檢查
module.exports = {
publicPath: './',
lintOnSave: false
}
1.2、構建vue專案
在vue的專案中,執行命令npm run build來進行構建,構建會就會打包在dist的目錄下,具體構建過
程如下:
npm run build #執行構建的命令 > [email protected] build /Applications/code/Yun/storm-ui > vue-cli-service build Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating ⠋ Building for production... WARNING Compiled with 3 warnings 21:04:53 warning asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: js/chunk-vendors.f4967954.js (1.57 MiB) warning entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: app (1.84 MiB) css/chunk-vendors.1f15154d.css js/chunk-vendors.f4967954.js css/app.2dade926.css js/app.6e24aa06.js warning webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/ File Size Gzipped dist/js/chunk-vendors.f4967954.js 1610.91 KiB 509.18 KiB dist/js/app.6e24aa06.js 63.34 KiB 13.24 KiB dist/css/chunk-vendors.1f15154d.css 205.07 KiB 33.06 KiB dist/css/app.2dade926.css 3.36 KiB 0.90 KiB Images and other types of assets omitted. DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
構建成功後,下來把vue專案下的dist資料夾的內容上傳到Linux伺服器下的/usr/local/webapp
目錄下,具體上傳後,整體的內容如下:
tree webapp/ webapp/ └── dist ├── css │ ├── app.2dade926.css │ └── chunk-vendors.1f15154d.css ├── favicon.ico ├── fonts │ ├── element-icons.535877f5.woff │ └── element-icons.732389de.ttf ├── index.html └── js ├── app.6e24aa06.js ├── app.6e24aa06.js.map ├── chunk-vendors.f4967954.js └── chunk-vendors.f4967954.js.map 4 directories, 10 files
1.3、修改nginx.conf
下來修改下nginx.conf,具體完整的內容如下所示:
cat nginx.conf
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /usr/local/webapp/dist;
#root html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
1.4、熱啟動nginx
下來再次熱啟動nginx,具體命令如下:
[root@centos-master usr]# cd local/nginx/
[root@centos-master nginx]# pwd
/usr/local/nginx
[root@centos-master nginx]# sbin/nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
[root@centos-master nginx]# sbin/nginx -s reload
1.5、驗證環境
下來直接使用伺服器的IP地址來訪問,如果能夠正常訪問,說明環境已部署OK,具體如下:
如上,整個vue的專案就可以很輕鬆的在nginx中部署成功。(我之前一直沒搞清楚,vue是8080埠,nginx是80埠
,其實忘記了nginx它具備反向代理的特性)。
歡迎關注微信公眾號“Python自動化測試”