vue2加载完成main样式文件再显示页面

在 Vue 2 中，为了在主样式文件（通常是指 `main.js` 或 `src/main.js`）加载完成后再显示整个页面，你可以采用以下方法：

1. **异步加载 CSS**：
使用 Vue 的 `beforeCreate` 或 `mounted` 生命周期钩子，在样式文件加载完成后渲染页面。可以使用 `import()` 函数动态导入并等待它完成后再执行 `nextTick` 来更新 DOM。

// main.js 或者 src/main.js
import('./assets/styles/global.scss').then((styles) => {
  document.head.appendChild(styles); // 将样式添加到文档头部
  this.$nextTick(() => {
    // 确保样式已生效后再显示页面
    this.$root.$forceUpdate();
    this.$router.app.$mount('#app'); // 钩子函数中显示页面
  });
});

这里假设你已经将样式保存在 `global.scss` 文件中，并且设置了全局挂载点为 '#app'。

2. **利用预处理器的加载策略**：
对于像 SASS、LESS 或 Stylus 等预处理器，有些工具（如 Webpack 或 Rollup）允许你设置资源的优先级，让主样式先于页面内容加载。

3. **使用模块化加载**：
如果项目规模较大，可以考虑按需加载部分组件及其相关的样式，而不是一次性加载所有的样式文件。

总之，确保在页面渲染之前，样式已完成加载并且已应用到文档上是关键。通过上述方法，你可以控制Vue应用在样式准备就绪后再显示出来。