如何在 localhost 中打开静态网站，但使用 Vite 生成且没有 运行 服务器？
How to open a static website in localhost but generated with Vite and without running a server?
注意：我使用的示例在 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，但仍然无法拥有不需要服务器的真正老式构建。
有什么想法吗？
好的，所以我设法让它工作（存储库已相应更新）。
我所需要的只是实际内联 css 和 js，为了实现这一点，我在这里利用了这一点：https://www.npmjs.com/package/vite-plugin-singlefile.
我创建了另一个专用于内联填充物的配置：
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.
注意：到目前为止，我真的很惊喜，图片和图标等资产仍然可以正常工作。
怎么样：
darkhttpd dist
参见：darkhttpd
注意：我使用的示例在 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，但仍然无法拥有不需要服务器的真正老式构建。
有什么想法吗？
好的，所以我设法让它工作（存储库已相应更新）。
我所需要的只是实际内联 css 和 js，为了实现这一点，我在这里利用了这一点：https://www.npmjs.com/package/vite-plugin-singlefile.
我创建了另一个专用于内联填充物的配置：
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.
注意：到目前为止，我真的很惊喜，图片和图标等资产仍然可以正常工作。
怎么样：
darkhttpd dist
参见：darkhttpd