1.vue资源build

修改index.js中的assetsPublicPath为  './'

图片.png

在webstorm中执行 npm run build 命令

图片.png

将build的index.html和static上传到服务器,假设路径是:
/home/hello/world/目录下

在要转发该静态资源的nginx的某一个server中配置:
location /world/ {
  root /home/hello/;
  index index.html;
}

浏览器中, 输入链接:
http://192.168.0.199:8080/world/index.html
即可访问

5.常见问题

5.1 浏览器CSP限制 (Content-Security-Policy)

###5.1.1 CSP策略
一个CSP头由多组CSP策略组成，中间由分号分隔，就像这样：
Content-Security-Policy: default-src 'self' www.baidu.com; script-src 'unsafe-inline'
其中每一组策略包含一个策略指令和一个内容源列表

5.1.2 常用的策略指令

## 1.default-src
定义了那些没有被更精确指令指定的安全策略。这些指令包括：
>> child-src
>> connect-src
>> font-src
>> img-src
>> media-src
>> object-src
>> script-src
>> style-src
##2.script-src
定义了页面中Javascript的有效来源
##3.img-src
定义了页面中图片和图标的有效来源
##4.font-src
定义了字体加载的有效来源
##5.connect-src
定义了请求、XMLHttpRequest、WebSocket 和 EventSource 的连接来源。
##6.child-src
定义了 web workers 以及嵌套的浏览上下文（如<frame>和<iframe>）的源。

5.1.3 内容源

内容源有三种：源列表、关键字和数据
#1.源列表
源列表是一个字符串，指定了一个或多个互联网主机（通过主机名或 IP 地址），和可选的或端口号。
站点地址可以包含可选的通配符前缀 (星号, '*')，端口号也可以使用通配符 (同样是 '*') 来表明所有合法端口都是有效来源。
主机通过空格分隔。
有效的主机表达式包括：
>> http://*.foo.com 
匹配所有使用 http协议加载 foo.com 任何子域名的尝试。
>> mail.foo.com:443 
匹配所有访问 mail.foo.com 的 443 端口 的尝试。
>> https://store.foo.com
匹配所有使用 https协议访问store.foo.com)的尝试。
如果端口号没有被指定，浏览器会使用指定协议的默认端口号。
如果协议没有被指定，浏览器会使用访问该文档时的协议。

#2.关键字
'none'
代表空集；即不匹配任何 URL。两侧单引号是必须的。
'self'
代表和文档同源，包括相同的 URL 协议和端口号。两侧单引号是必须的。
'unsafe-inline'
允许使用内联资源，如内联的<script>元素、javascript: URL、
内联的事件处理函数和内联的<style>元素，两侧单引号是必须的。
'unsafe-eval'
允许使用 eval() 等通过字符串创建代码的方法。两侧单引号是必须的。
如:
Content-Security-Policy: default-src 'self' trustedscripts.foo.com

#3.数据
>> data:
允许data: URI作为内容来源。
>> mediastream:
允许mediastream: URI作为内容来源。
如:
Content-Security-Policy: default-src 'self'; img-src 'self' data:; media-src mediastream:

5.1.4 nginx示例配置

#nginx的server块中加入下述代码即可
add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' http://*.zy.com; style-src 'self' http://*.zy.com; img-src 'self' http://*.zy.com; media-src 'self' http://*.zy.com;";

浏览器CSP限制.png

参考资源
https://www.jianshu.com/p/f1de775bc43e (CSP策略及绕过方法)
https://www.jianshu.com/p/63c13f36a17a (Nginx提高安全与性能的最好配置)