记录一下这次搭建Colors小站遇到的问题（为啥总是在不停在踩同一个坑啊‍(╯°口°)╯(┴—┴）

最新推荐文章于 2025-12-03 08:43:36 发布

原创最新推荐文章于 2025-12-03 08:43:36 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#python

本文分享了关于Vue项目中favicon设置、动态title实现、首次加载速度优化及Nginx配置技巧的经验，包括解决403错误、favicon显示问题、动态设置页面标题、提升加载速度和robots.txt配置。

首先放上小站地址，有兴趣的可以加入呀：Colors小站

1.nginx的403错误

之前一直没遇到过这个问题，使用lsof -I:80的时候，发现nginx一个启动是root，一个是nobody，然后去找原因，果然

进入你的 nginx.conf

添加/修改 user root;

重启 nginx -s reload 搞定

2. vue的favicon设置失败

最开始的时候我以为直接在index.html里面写就可以了

<link rel="shortcut icon" href="./static/favicon/cat.icon" />

结果并不能打包上服务器，无耐寻求万能的互联网。

在运行环境 webpack.dev.conf.js

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon: './static/favicon/cat.ico', // 添加这个
      inject: true 
}),

在生产环境 webpack.prod.conf.js

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      favicon: './static/favicon/cat.ico', // 添加这个
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
}),

然而打包上服务器依然不可以，遂怒，open打包好的index.html,发现favicon的地址不对，改为

之前是<link rel="shortcut icon" href=/cat.ico>改为<link rel="shortcut icon" href="static/favicon/cat.ico">

ok 搞定

3. vue的动态title

如果你不是在一params在路由上传值的话，可以试试这种方式

router.beforeEach((to, from, next) => {
  iView.LoadingBar.start()
  if (to.params.title) {
    document.title = to.params.title
  }
  else if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

4.解决首次访问过慢的问题，加上压缩功能，这个主要是由nginx加上

gzip on;
gzip_http_version 1.1;
gzip_disable 'MSIE[1-6]'; #拒绝ie1-6级压缩
gzip_types text/css text/javascript application/javascript image/jpeg image/png image/gif;
gzip_buffers 4 8k;
gzip_min_length 1k; # 设置最小压缩门槛
gzip_comp_level 9; #压缩级别
gzip_vary on; #加一个head

5.为小站加上robots.txt

re_path(r'^robots\.txt', TemplateView.as_view(template_name='robots.txt', content_type='text/plain')),

将robots.txt放在templates下

User-agent: *
Allow:/about
Allow:/article
Disallow:/login