修改vue中的挂载页面(index.html)的路径

vue中的挂载页面index.html路径是在webpack.dev.conf.js下配置的,

找到plugins下面的

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),

以上便是挂载页面的配置,其中
filename是输出的文件名,默认是index.html
template是依赖的模板,修改这个就能改变挂载的模板路径

例如

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
      inject: true
    }),

以上配置将启用src下的index.html路径。

### 如何在 Vue 3 的 `index.html` 中使用 Pinia 为了在 Vue 3 项目中的 `index.html` 文件里利用 Pinia 进行状态管理,通常不建议直接在此文件内操作 Pinia 或任何 Vuex 替代方案的状态。最佳实践是在 JavaScript/TypeScript 模块中配置并初始化 Pinia 实例,再通过组件或其他逻辑单元访问这些存储的数据。 然而,在某些特殊场景下如果确实需要间接影响页面加载初期的行为或预设一些全局变量,则可以考虑如下方法: #### 方法一:创建自定义脚本标签引入外部 JS 文件来设置初始状态 可以在 `public/index.html` 内部添加 `<script>` 标签指向一个单独的 JavaScript 文件,该文件负责提前准备应用所需的上下文信息,并将其挂载到 window 对象上以便后续被 Pinia 使用[^1]。 ```html <!-- public/index.html --> <!DOCTYPE html> <html lang="en"> <head> <!-- ...其他头部内容... --> </head> <body> <div id="app"></div> <script src="/path/to/init-context.js" type="module"></script> <!-- 自定义初始化脚本 --> </body> </html> ``` ```javascript // /src/init-context.js window.INITIAL_CONTEXT = { userInfo: { name: &#39;John Doe&#39; } }; ``` 接着修改 main.ts 来读取这个对象作为插件安装的一部分: ```typescript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import { createPinia } from &#39;pinia&#39;; const app = createApp(App); if (typeof INITIAL_CONTEXT !== "undefined") { Object.assign(window, { INITIAL_CONTEXT }); } app.use(createPinia()); app.mount(&#39;#app&#39;); ``` 最后调整 store 定义以接收来自 global property 的数据: ```typescript // @/store/user.ts import { defineStore } from &#39;pinia&#39;; export const useUserStore = defineStore(&#39;user&#39;, { state: () => ({ userInfo: typeof INITIAL_CONTEXT?.userInfo === &#39;object&#39; ? INITIAL_CONTEXT.userInfo : {} }), }); ``` 这种方法允许开发者在 HTML 文档层面传递少量必要的启动参数给前端应用程序,但应谨慎运用以免破坏单页应用(SPA)架构带来的诸多好处。 #### 方法二:借助环境变量注入静态资源路径或者其他非敏感配置项 对于只需要简单字符串类型的常量值的情况,可以通过 Webpack 环境变量等方式实现更为优雅的安全解决方案而不必触及 HTML 结构本身[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值