Vue 2 Vite应用程序:无法解析导入分析的源

vq8itlhq  于 2022-11-17  发布在  Vue.js
关注(0)|答案(2)|浏览(170)

我目前正在设置一个vue 2应用程序与vite。
我收到这个错误。我想在vue 2中设置项目。我知道它是为vue 3构建的,但我是否遗漏了什么?

vite配置

import { minifyHtml, injectHtml } from 'vite-plugin-html'
  import legacy from '@vitejs/plugin-legacy'
  const path = require('path')
  const { createVuePlugin } = require('vite-plugin-vue2')

  module.exports = {
    plugins: [
      createVuePlugin(),
      minifyHtml(),
      injectHtml({
        injectData: {
          title: 'ProjectName',
          description: 'A single page application created using Vue.js'
        }
      }),
      legacy({
        targets: ['ie >= 11'],
        additionalLegacyPolyfills: ['regenerator-runtime/runtime']
      })
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, '/src'),
        '~bootstrap': 'bootstrap'
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "./src/scss/variables";`
        }
      }
    }
  }

我的文件夹结构:

我的软件包. json

{
      "name": "co",
      "private": true,
      "version": "0.0.0",
      "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
      },
      "devDependencies": {
        "@fullhuman/postcss-purgecss": "^4.1.3",
        "@vitejs/plugin-legacy": "^1.8.1",
        "@vitejs/plugin-vue": "^1.6.1",
        "autoprefixer": "^10.4.5",
        "postcss": "^8.4.12",
        "sass": "~1.32.13",
        "vite": "^2.9.6",
        "vite-plugin-vue2": "^1.9.0",
        "vue-template-compiler": "^2.6.11"
      },
      "dependencies": {
        "bootstrap": "^4.6.0",
        "eslint": "^8.14.0",
        "eslint-plugin-vue": "^8.7.1",
        "vue": "^2.6.11",
        "vue-router": "^3.2.0"
      }
    }
5f0d552i

5f0d552i1#

更新了我的配置如下。似乎已经得到它的工作!

import { defineConfig } from "vite";
          import { createVuePlugin as vue } from "vite-plugin-vue2";

          // https://vitejs.dev/config/const 
          const path = require("path");
          export default defineConfig({
            plugins: [vue()],
            resolve: {
              extensions: [
                ".mjs",
                ".js",
                ".ts",
                ".jsx",
                ".tsx",
                ".json",
                ".vue",
                ".scss",
              ],
              alias: {
                "@": path.resolve(__dirname, "./src"),
                json2csv: "json2csv/dist/json2csv.umd.js",
                '~bootstrap': 'bootstrap'
              },
            },
            css: {
              preprocessorOptions: {
                scss: {
                  //  additionalData: `@import "@/scss/app.scss";`,
                  additionalData: `@import "src/scss/_variables.scss";`,
                },
              },
            },
            server: {
              port: 8090,
            },
          });
p5cysglq

p5cysglq2#

这个对我也有用
我在package.json文件旁边创建了一个名为vite.config.js的文件。
并在其中添加了以下代码:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

希望这对你有用。

相关问题