typescript 如何在localhost中打开一个静态网站，但使用Vite生成，而无需运行服务器？

carvr3hs 于 2023-06-07 发布在 TypeScript

关注(0)|答案(2)|浏览(545)

注意：我使用的示例在GitHub存储库https://github.com/mary-perret-1986/primevue-poc上可用
我用Vue.js 3 + Vite + PrimeVue创建了一个简单的项目。
到目前为止，当我在开发时，如果我在服务于构建（即：/dist）与服务器。
但是我想看看我能不能直接从浏览器打开/dist/index.html...我的意思是，从技术上讲，这应该是可能的。
下面是配置的位：
package.json

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite build && vite preview"
  },
  "dependencies": {
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primevue": "^3.2.0-rc.1",
    "vue": "^3.0.5",
    "vue-property-decorator": "^9.1.2",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/node": "^14.14.37",
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/compiler-sfc": "^3.0.5",
    "sass": "^1.26.5",
    "typescript": "^4.1.3",
    "vite": "^2.1.5",
    "vue-tsc": "^0.0.15"
  }
}

vite.config.ts：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    open: true,
  },
  build: {},
  resolve: {
    alias: [
      { find: '@', replacement: '/src' },
      { find: 'views', replacement: '/src/views' },
      { find: 'components', replacement: '/src/components' },
    ]
  },
  define: {
    'process.env': process.env
  }
})

安装包工作正常：

$ yarn
yarn install v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix 
package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.17s.

也发展：

$ yarn dev
yarn run v1.22.10
$ vite
Pre-bundling dependencies:
  vue
  primevue/config
  vuex
  vue-router
  vue-class-component
  (...and 1 more)
(this will be run only when your dependencies or config have changed)

  vite v2.1.5 dev server running at:

  > Network:  http://192.168.0.10:3000/
  > Local:    http://localhost:3000/   
  > Network:  http://172.17.128.1:3000/

  ready in 632ms.

使用预览服务器检查构建，也可以工作：

$ yarn preview
yarn run v1.22.10
$ vite build && vite preview
vite v2.1.5 building for production...
✓ 34 modules transformed.
dist/assets/logo.03d6d6da.png                                   6.69kb
dist/assets/primeicons.7362b83d.eot                             56.21kb
dist/assets/color.473bc8ca.png                                  10.11kb
dist/assets/roboto-v20-latin-ext_latin-regular.b86b128b.woff2   22.11kb
dist/assets/roboto-v20-latin-ext_latin-500.fa074f87.woff2       22.20kb
dist/assets/roboto-v20-latin-ext_latin-700.8d9364a0.woff2       22.19kb
dist/assets/roboto-v20-latin-ext_latin-regular.e70a908b.woff    28.36kb
dist/assets/primeicons.c1e93246.ttf                             56.04kb
dist/assets/roboto-v20-latin-ext_latin-500.d092ad8e.woff        28.39kb
dist/assets/roboto-v20-latin-ext_latin-700.e24c2752.woff        28.41kb
dist/assets/primeicons.3929b551.woff                            56.11kb
dist/assets/primeicons.8f9d2aaf.svg                             229.14kb
dist/index.html                                                 0.47kb
dist/assets/About.17af8924.js                                   0.19kb / brotli: 0.14kb
dist/assets/index.e5d45779.js                                   3.63kb / brotli: 1.52kb
dist/assets/vendor.9f2b5e0c.js                                  90.90kb / brotli: 29.73kb
dist/assets/index.6f411dd0.css                                  226.74kb / brotli: 20.14kb

  vite v2.1.5 build preview server running at:

  > Network:  http://192.168.0.10:5000/
  > Local:    http://localhost:5000/
  > Network:  http://172.17.128.1:5000/

当我愿意在没有服务器的情况下打开我的构建时，问题就出现了，所有人都认为这是可行的，除了当我打开/dist/index.html时，控制台对我大喊大叫：

index.html:1 Access to script at 'file:///C:/assets/vendor.9f2b5e0c.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
index.html:9 GET file:///C:/assets/vendor.9f2b5e0c.js net::ERR_FAILED
index.html:1 Access to script at 'file:///C:/assets/index.6aa5dbbe.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
index.html:8 GET file:///C:/assets/index.6aa5dbbe.js net::ERR_FAILED
index.html:10 GET file:///C:/assets/index.96fff16b.css net::ERR_FILE_NOT_FOUND
/C:/favicon.ico:1 GET file:///C:/favicon.ico net::ERR_FILE_NOT_FOUND

看看新构建的/dist/index.html的上下文：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  <script type="module" crossorigin src="/assets/index.7ed2b14a.js"></script>
  <link rel="modulepreload" href="/assets/vendor.9f2b5e0c.js">
<link rel="stylesheet" href="/assets/style.5b5d95b2.css">
</head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

我已经检查了Vite文档https://vitejs.dev/guide/static-deploy.html的这一部分，但仍然无法管理不需要服务器的真实的老式构建。
你知道吗？

typescript

来源：https://stackoverflow.com/questions/67031295/how-to-open-a-static-website-in-localhost-but-generated-with-vite-and-without-ru

2条答案

按热度按时间

2skhul331#

好吧，所以我设法使它工作（存储库已相应更新）。
我所需要的就是实际内联css和js，为了实现我在这里利用了这一点：https://www.npmjs.com/package/vite-plugin-singlefile。
我创建了另一个专门用于内联stuffery的配置：
vite.config.inlined.ts：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), viteSingleFile()],
    build: {
        cssCodeSplit: false,
        assetsInlineLimit: 100000000,
        rollupOptions: {
            output: {
                manualChunks: () => "everything.js",
            },
        },
    },
  resolve: {
    alias: [
      { find: '@', replacement: '/src' },
      { find: 'views', replacement: '/src/views' },
      { find: 'components', replacement: '/src/components' },
    ]
  },
  server: {
    open: true,
  },
  define: {
    'process.env': process.env
  }
})

并相应地更新了我的package.json：

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite build && vite preview",
    "inlined-build": "vite build --config vite.config.inlined.ts",
    "inlined-preview": "vite build --config vite.config.inlined.ts && start ./dist/index.html"
  },
  "dependencies": {
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primevue": "^3.2.0-rc.1",
    "vue": "^3.0.5",
    "vue-class-component": "^8.0.0-0",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/node": "^14.14.37",
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/compiler-sfc": "^3.0.5",
    "sass": "^1.26.5",
    "typescript": "^4.1.3",
    "vite": "^2.1.5",
    "vite-plugin-singlefile": "^0.5.1",
    "vue-tsc": "^0.0.15"
  }
}

“瞧”：

$ yarn inlined-preview
yarn run v1.22.10
$ vite build --config vite.config.inlined.ts && start ./dist/index.html
vite v2.1.5 building for production...
✓ 34 modules transformed.
dist/assets/primeicons.8f9d2aaf.svg   229.14kb
dist/index.html                       845.29kb
dist/assets/style.d35cde0e.css        741.65kb / brotli: skipped (large chunk)
dist/assets/index.dbc56441.js         103.16kb / brotli: 37.49kb
Done in 6.63s.

注意：到目前为止，我真的很惊喜，像图片和图标这样的资产仍然工作得很好。

赞(0）回复(0）举报 2023-06-07

rjee0c152#

要做到这一点与vite板载工具集

base: "./"

在您的vite配置或构建中

vite build --base="./"

base****

类型：string默认值：/
在开发或生产中提供服务时的基本公共路径。有效值包括：

绝对URL路径名，例如/example/
完整URL，例如https://example.com/
*空字符串或./（嵌入式部署）

公有基路径

如果您在嵌套的公共路径下部署项目，只需指定base配置选项，所有资产路径将相应地重写。此选项也可以指定为命令行标志，例如vite build --base=/my/public/path/。
JS导入的资产URL、CSS url()引用和.html文件中的资产引用都将在构建过程中自动调整以遵守此选项。
例外情况是当您需要动态连接URL时。在这种情况下，您可以使用全局注入的import.meta.env.BASE_URL变量，它将成为公共基础路径。请注意，此变量在构建期间被静态替换，因此它必须完全按原样显示（即import.meta.env['BASE_URL']不起作用）。
相关：Asset Handling

赞(0）回复(0）举报 2023-06-07

我来回答

typescript 如何在localhost中打开一个静态网站，但使用Vite生成，而无需运行服务器？

2条答案

base****

公有基路径

相关问题

热门标签

最新问答