标签: vite

是否可以在生产环境中启用 Vue-Vite 中的源映射？

我想将它用于 Bugsnag。

在文档中找不到任何有关它的信息。

在开发中，它开箱即用。

laravel 9我正在从事与和Vite合作 的项目laravel-vite，

在开发环境中一切正常，但在生产 cPanel 服务器中我遇到了这个问题

Vite manifest not found at: /home/???????/cart_shop/public/build/manifest.json

# With 

Missing Vite Manifest File
Did you forget to run `npm install && npm run dev`?

我尝试解决问题，但没有任何效果，我需要从 vite.config.js 更改 public 文件夹和 sep 文件夹构建文件位置，但我找不到方法。

请注意：cPanel 共享服务器中的文件顺序已更改为

- home
    - public_html
        - cart_shop
           - Root
           - public
           - etc

到

- home
    - public_html
       - public files and folders  // I changed the index URLs too.
- cart_shop
    - Root
    - etc

我的vite.config.js …

从 CRA 迁移后未定义缓冲区（创建 React 应用程序）

"vite": "^2.7.12"

我尝试添加插件，添加缓冲区的定义，但它不起作用。

const viteConfig = defineConfig({
/*    define: {
        "Buffer": {}
    },*/
    plugins: [reactRefresh(), react()],
    build: {
        rollupOptions: {
            input: {
                main: resolve('index.html'),
            },
        },
    },
    clearScreen: false
});

我正在尝试编译一个基于 monaco 编辑器的 Web 组件（在 lit 元素上下文中）。尝试了很多选项后，我现在将结果缩减为两个文件

• rmx-monaco.abc123.js
• style.css

我的首要任务是摆脱散列（abc123），但我也想将 js 和 css 缩减为一个文件。提前致谢

我的配置如下：

import { resolve } from "path";

export default defineConfig({
    base: "/",
    build: {
        rollupOptions: {
            input:
                // main: resolve(__dirname, "index.html"),
                resolve(__dirname, "src/rmx-monaco.ts"),

            output: {
                // Prevent vendor.js being created
                manualChunks: undefined,
                // chunkFileNames: "zzz-[name].js",
                // this got rid of the hash on style.css
                assetFileNames: "assets/[name].[ext]",
            },
        },
        // Prevent vendor.css being created
        cssCodeSplit: false,
        // prevent some warnings
        chunkSizeWarningLimit: 60000,
    },
});

我的 …

我有一个 Vue-cli 应用程序，我正在尝试将其转换为 vite。我正在使用 Docker 来运行服务器。我看了几个教程，并让 vite 在开发模式下运行，没有错误。但是，浏览器无法访问该端口。也就是说，当我在 macbook 的命令行上（在 Docker 之外）时，我不能curl这样做：

$ curl localhost:8080
curl: (52) Empty reply from server

如果我尝试 localhost:8081 我得到Failed to connect. 此外，如果我运行 webpack 开发服务器，它会正常工作，所以我知道我的容器的端口已公开。

另外，如果我在运行 vite 服务器的同一虚拟机中运行curl，它就会工作，所以我知道 vite 正在工作。

详细信息如下：

在 package.json 中：

...
"dev": "vue-cli-service serve",
"vite": "vite",
...

整个 vite.config.ts 文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    resolve: { alias: { '@': '/src' } },
    plugins: [vue()],
    server: {
        port: …

如果您要更改vite应用程序端口，请按照流程操作。

"scripts": {
  "dev": "vite --port 3006",
  "build": "vite build",
  "preview": "vite preview"
}

我正在使用 Vue 3、Vite 和 TypeScript。我想尝试使用 TypeScript 构建 Vue 项目。到目前为止，配置确实很困难。我一直在查看各种文档，但我正在努力实现我的目标。如果代码有问题，项目不应构建并抛出错误。

我附上下面的代码，我想寻求帮助。

应用程序.vue

<template>
  <header>
    <h1>The Learning Resources App</h1>
  </header>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

// import StoredResource from '//StoredResource';

interface VueData {
  storedResources: StoredResource[];
}

export default defineComponent({
  name: 'App',
  data(): VueData {
    return {
      storedResources: [
        {
          id: 'official-guide' as number,
          title: 'Official Guide',
          description: 'The official Vue.js documentation.',
          link: 'https://vuejs.org/',
        },
        {
          id: 'google',
          title: 'Google',
          description: 'Learn to google...',
          link: 'https://www.google.co.uk/',
        },
      ],
    }; …

我尝试在 vite 中构建我的项目，

我的项目 - https://github.com/yakovcohen4/starbucks-openlayers

我跑步npm run dev和工作。

但是当我运行构建它时出现错误。

错误信息： Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

我尝试获取数据并认为这是问题链接（第22+23行） - https://github.com/yakovcohen4/starbucks-openlayers/blob/main/starbucks-project/src/main.ts

const shopsData = await fetchStarbucksShops();

如果有人遇到这个诅咒我很乐意提供帮助

users-iMac-2:backend NEHAL$ npm run dev

> dev
> vite

file:///Users/user/Desktop/backend/node_modules/vite/bin/vite.js:7
    await import('source-map-support').then((r) => r.default.install())
    ^^^^^

SyntaxError: Unexpected reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:122:18)
    at async link (internal/modules/esm/module_job.js:42:21)
users-iMac-2:backend NEHAL$ 

我使用 vite 和 React 创建了一个项目。我创建一个主题将我的项目设置为从右到左。一切正常，项目运行正常。

const theme = createTheme({
  direction: 'rtl' , 
  typography: {
    "fontFamily": `"iransans"`,
    "fontSize": 11,
    "fontWeightLight": 300,
    "fontWeightRegular": 400,
    "fontWeightMedium": 500
   }
})
const cacheRtl = createCache({
  key: "muirtl",
  stylisPlugins: [prefixer, rtlPlugin]
})


function App() {
  let history = useHistory();
  let contained = "Test The";
  return (
    <div className="App">
      <Router>
        <div>
          <Switch>
            <CacheProvider value={cacheRtl}>
              <ThemeProvider theme={theme}>
                <Route exact path="/applicant">
                  <Applicant />
                </Route>
              </ThemeProvider>
            </CacheProvider>
          </Switch>
        </div>
      </Router>
    </div>
  )
}
export default App

将 Slide 组件添加到我的项目后。突然我的项目停止工作，控制台显示

Box.js:5 …