开场白
开始使用
API
- API: The <client-only> Component
- API: <nuxt-child> 组件
- API: <nuxt-link> 组件
- API: <nuxt> 组件
- API: 构建配置
- API: buildDir 属性
- API: 缓存配置
- API: CSS 配置
- API: dev 属性配置
- API: dir 属性
- API: 环境变量配置
- API: generate 属性配置
- API: globalName 属性
- API: head 属性配置
- API: The hooks Property
- API: ignore 属性
- API: The loading indicator Property
- API: loading 属性配置
- API: The mode Property
- API: modern 属性
- API: modules 属性
- API: modulesDir 属性
- API: performance 属性
- API: plugins 属性配置
- API: The render Property
- API: rootDir 属性配置
- API: router 属性配置
- API: server 属性
- API: serverMiddleware 属性
- API: srcDir 属性配置
- API: transition 属性配置
- API: vue.config 属性
- API: watch 属性
- API: watchers 属性
- API: 上下文对象
- API: asyncData 方法
- API: The Builder Class
- API: The Generator Class
- API: The ModuleContainer Class
- API: The Nuxt Class
- API: The Renderer Class
- API: Nuxt Modules Intro
- API: nuxt.renderAndGetWindow(url, options)
- API: nuxt.renderRoute(route, context)
- API: nuxt.render(req, res)
- API: Nuxt(options)
- API: fetch 方法
- API: head 方法
- API: key 属性
- API: layout 属性
- API: loading 属性
- API: middleware 属性
- API: scrollToTop 属性
- API: transition 属性
- API: validate 方法
- API: The watchQuery Property
配置
- 外部资源
- 预处理器
- JSX
- Postcss 插件
- 如何扩展 Webpack 的配置
- Webpack 插件
- Caching Components
- 如何更改应用的主机和端口配置?
- 如何集成 Google 统计分析服务?
- 如何发起跨域资源请求?
- How to extend Webpack to load audio files?
部署
- 如何使用 Now.sh 进行部署?
- 使用 Surge.sh 部署
- 在 Google App Engine 上部署
- Netlify 部署
- AWS: S3+Cloudfront 部署
- Dokku 部署
- nginx 代理
- 如何部署至 GitHub Pages?
- 部署至 Heroku
其他
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
nginx 代理
map $sent_http_content_type $expires {
"text/html" epoch;
"text/html; charset=utf-8" epoch;
default off;
}
server {
listen 80; # the port nginx is listening on
server_name your-domain; # setup your domain here
gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1000;
location / {
expires $expires;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://127.0.0.1:3000; # set the address of the Node.js instance here
}
}
将nginx与生成的页面和缓存代理一起使用
如果您有一个定期更改内容的大量网站,您可能希望受益于Nuxt生成功能和nginx缓存。
以下是示例配置。 请记住:
- 根文件夹 应与 配置generate.dir 设置相同
- 由Nuxt设置的过期标头被剥离 (由于缓存)
- Nuxt 和 nginx都可以设置额外的标题,建议选择一个(如果有疑问,请选择nginx)
- 如果您的站点大部分是静态的,请增加
proxy_cache_path inactive
和proxy_cache_valid
数值
如果您不生成路由但仍希望受益于nginx缓存:
- 删除
root
配置 - 将
location @proxy {
更改为location / {
- 删除其他2个
location
配置
proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=nuxt-cache:25m max_size=1g inactive=60m use_temp_path=off;
map $sent_http_content_type $expires {
"text/html" 1h; # set this to your needs
"text/html; charset=utf-8" 1h; # set this to your needs
default 7d; # set this to your needs
}
server {
listen 80; # the port nginx is listening on
server_name your-domain; # setup your domain here
gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1000;
charset utf-8;
root /var/www/NUXT_PROJECT_PATH/dist
location ~* \.(?:ico|gif|jpe?g|png|woff2?|eot|otf|ttf|svg|js|css)$ {
expires $expires;
add_header Pragma public;
add_header Cache-Control "public";
try_files $uri $uri/ @proxy;
}
location / {
expires $expires;
add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
add_header X-Frame-Options "SAMEORIGIN";
try_files $uri $uri/index.html @proxy; # for generate.subFolders: true
# try_files $uri $uri.html @proxy; # for generate.subFolders: false
}
location @proxy {
expires $expires;
add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-Cache-Status $upstream_cache_status;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_ignore_headers Cache-Control;
proxy_http_version 1.1;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://127.0.0.1:3000; # set the address of the Node.js instance here
proxy_cache nuxt-cache;
proxy_cache_bypass $arg_nocache; # probably better to change this
proxy_cache_valid 200 302 60m; # set this to your needs
proxy_cache_valid 404 1m; # set this to your needs
proxy_cache_lock on;
proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504;
proxy_cache_key $uri$is_args$args;
proxy_cache_purge PURGE from 127.0.0.1;
}
}
Laravel Forge的 nginx 配置
将 YOUR_WEBSITE_FOLDER
更改为您的网站文件夹,将 YOUR_WEBSITE_DOMAIN
更改为您的网站网址。 Laravel Forge 将为您填写这些,但一定要仔细检查。
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/before/*;
map $sent_http_content_type $expires {
"text/html" epoch;
"text/html; charset=utf-8" epoch;
default off;
}
server {
listen 80;
listen [::]:80;
server_name YOUR_WEBSITE_DOMAIN;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
charset utf-8;
gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1000;
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/server/*;
location / {
expires $expires;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://127.0.0.1:3000; # set the address of the Node.js
}
access_log off;
error_log /var/log/nginx/YOUR_WEBSITE_FOLDER-error.log error;
location ~ /\.(?!well-known).* {
deny all;
}
}
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/after/*;
使用 TLS 配置 Laravel Forge
最好让 Laravel Forge 为您编辑 nginx.conf
,点击 Sites -> YOUR_WEBSITE_DOMAIN (SERVER_NAME),然后点击SSL并从其中一个提供商安装证书,请记住激活证书,你的 nginx.conf
现在应该是这样的:
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/before/*;
map $sent_http_content_type $expires {
"text/html" epoch;
"text/html; charset=utf-8" epoch;
default off;
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name YOUR_WEBSITE_DOMAIN;
# FORGE SSL (DO NOT REMOVE!)
ssl_certificate /etc/nginx/ssl/YOUR_WEBSITE_FOLDER/258880/server.crt;
ssl_certificate_key /etc/nginx/ssl/YOUR_WEBSITE_FOLDER/258880/server.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!3DES';
ssl_prefer_server_ciphers on;
ssl_dhparam /etc/nginx/dhparams.pem;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
charset utf-8;
gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1000;
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/server/*;
location / {
expires $expires;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_redirect off;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://127.0.0.1:3000; # set the address of the Node.js
}
access_log off;
error_log /var/log/nginx/YOUR_WEBSITE_FOLDER-error.log error;
location ~ /\.(?!well-known).* {
deny all;
}
}
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/after/*;
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论