Question

我已经从网上下载了vue.js模板。每当我通过npm构建文件时，index.html上的标题就会一直交换为模板的名称。有没有办法更改默认标题？

Answer 1

据我所知，您需要配置vue.config.js这样的文件（请注意Webpack部分）-这些文件来自正在运行的项目，因此您具有最大的了解关于如何看待结束：

module.exports = {
    baseUrl: '/',
    outputDir: (process.env.NODE_ENV === 'production' ? '../web/' : '../web/js/'),
    indexPath: '../app/Resources/views/index.html.twig',

    // Setting this to false can speed up production builds if you don't need source maps for production.
    productionSourceMap: false,

    // By default, generated static assets contains hashes in their filenames for better caching control.
    // However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
    // generated by Vue CLI, you can disable filename hashing by setting this option to false,
    filenameHashing: false,
    lintOnSave: false,

    // https://cli.vuejs.org/ru/config/#devserver-proxy
    devServer: {},

    // https://cli.vuejs.org/ru/config/#chainwebpack
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = 'Ojok Deep Sales Platform';
                args[0].template = './index.html.template';
                return args;
            })
    }
};

在您更新了vue.config.js文件之后，将index.html模板文件更改为这样：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript" src="../js/go.js"></script>
    <script type="text/javascript" src="../js/momentjs.js"></script>
    <script type="text/javascript" src="../js/webphone/flashphoner.js"></script>
    <script type="text/javascript" src="../js/webphone/SoundControl.js"></script>
</head>

<body>
<div id="app"></div>
</body>
</html>

请注意<title>标签中包含的内容：

    <title><%= htmlWebpackPlugin.options.title %></title>

生成新的index.html文件后，您的标题应该设置为您写入args[0].title选项中使用的名称。

希望这会有所帮助。

Answer 2

我还是VueJS的新手，但这是我的发现。我喜欢任何建议的选择或改进。我选择了选项＃2。

选项1：设置为多页模式 vue.config.js

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'My Website Title',
    },
  }
}

选项2：titleMixin（引自https://medium.com/@Taha_Shashtari/the-easy-way-to-change-page-title-in-vue-6caf05006863）

titleMixin.js 已添加到mixins文件夹

function getTitle (vm) {
  const { title } = vm.$options
  if (title) {
    return typeof title === 'function'
      ? title.call(vm)
      : title
  }
}
export default {
  created () {
    const title = getTitle(this)
    if (title) {
      document.title = title
    }
  }
}

添加到main.js

import titleMixin from './mixins/titleMixin'

Vue.mixin(titleMixin)

在组件页面中使用

<script>
  export default {
    title: 'Foo Page'
  }
</script>

在具有功能的Vue实例中使用

<script>
export default {
  title () {
    return `Foo Page — ${this.someValue}`
  },
  data () {
    return {
      someValue: 'bar'
    }
  }
}
</script>

Answer 3

选项1：

编辑您的private static List<String> skipFilterUrls = Arrays.asList("/", "/*.html", "/favicon.ico", "/**/*.html", "/**/*.css", "/**/*.js"); @Override protected boolean shouldNotFilter(HttpServletRequest request) throws ServletException { return skipFilterUrls.stream().anyMatch(url -> new AntPathRequestMatcher(url).matches(request)); }并替换为：

/public/index.html

与此：

<title><%= htmlWebpackPlugin.options.title %></title>

选项2：

vue.config.js

<title>Your Title Here</title>

/public/index.html

module.exports = {
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].title = 'Your Title Here';
            return args;
        });
    }
}

在index.html

3 个答案:

选项1：

选项2：