如何在本地主机中打开一个由 Vite 生成且不运行服务器的静态网站？

Question

注意：我正在使用的示例可在 GitHub 存储库https://github.com/mary-perret-1986/primevue-poc上找到

\n

我使用 Vue.js 3 + Vite + PrimeVue 创建了一个简单的项目。

\n

到目前为止，当我正在开发并且正在为构建提供服务时（即/dist服务器提供构建（即）时，一切都像魅力一样。

\n

但我想看看我是否可以打开/dist/index.html直接从浏览器打开......我的意思是，从技术上讲，这应该是可能的。

\n

以下是配置部分：

\n

package.json

\n

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

\n

vite.config.ts:

\n

import { defineConfig } from \'vite\'\nimport vue from \'@vitejs/plugin-vue\'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [vue()],\n  server: {\n    open: true,\n  },\n  build: {},\n  resolve: {\n    alias: [\n      { find: \'@\', replacement: \'/src\' },\n      { find: \'views\', replacement: \'/src/views\' },\n      { find: \'components\', replacement: \'/src/components\' },\n    ]\n  },\n  define: {\n    \'process.env\': process.env\n  }\n})\n

\n

安装包工作正常：

\n

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

\n

还正在开发：

\n

$ yarn dev\nyarn run v1.22.10\n$ vite\nPre-bundling dependencies:\n  vue\n  primevue/config\n  vuex\n  vue-router\n  vue-class-component\n  (...and 1 more)\n(this will be run only when your dependencies or config have changed)\n\n  vite v2.1.5 dev server running at:\n\n  > Network:  http://192.168.0.10:3000/\n  > Local:    http://localhost:3000/   \n  > Network:  http://172.17.128.1:3000/\n\n  ready in 632ms.\n

\n

使用预览服务器检查构建是否也有效：

\n

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

\n

当我愿意在没有服务器的情况下打开我的构建时，就会出现问题，从所有帐户来看，这应该是可行的，除了当我打开/dist/index.html，控制台对我大喊大叫：

\n

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.\nindex.html:9 GET file:///C:/assets/vendor.9f2b5e0c.js net::ERR_FAILED\nindex.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.\nindex.html:8 GET file:///C:/assets/index.6aa5dbbe.js net::ERR_FAILED\nindex.html:10 GET file:///C:/assets/index.96fff16b.css net::ERR_FILE_NOT_FOUND\n/C:/favicon.ico:1 GET file:///C:/favicon.ico net::ERR_FILE_NOT_FOUND\n

\n

看看新建的环境/dist/index.html：

\n

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

\n

我已经检查了 Vite 文档的这一部分https://vitejs.dev/guide/static-deploy.html，但仍然无法设法拥有不需要服务器的真正老式构建。

\n

任何想法？

\n

Answer 1

好吧，我设法让它工作（存储库已相应更新）。

\n

我所需要的只是实际内联 css 和 js，为了实现这一点，我在这里利用了这一点：https: //www.npmjs.com/package/vite-plugin-singlefile。

\n

我创建了另一个专门用于内联填充的配置：

\n

vite.config.inlined.ts:

\n

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

\n

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

\n

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

\n

和“瞧”：

\n

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

\n

注意：到目前为止，我实际上感到惊喜，图片和图标等资源仍然工作得很好。

\n