3

注意：我使用的示例可在 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，但仍然无法拥有一个不需要服务器的真正老式构建。

任何想法？

4

2 回答 2

4

好的，所以我设法使它工作（存储库已相应更新）。

我所需要的只是实际内联 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.

注意：到目前为止，我真的很惊喜，图片和图标等资产仍然可以正常工作。

于 2021-04-10T06:53:59.443 回答
-1

关于什么：

darkhttpd dist

参见：darkhttpd

于 2021-05-28T21:53:03.837 回答