标签: vue-cli

我正在使用 Vue 和 webpack，有一个环境变量告诉 webpack 为生产或开发而构建。

这是有效的：

NODE_ENV=production webpack

console.log(process.env)

但是，本文档解释了您可以.env根据生产或开发模式使用不同的文件来更改应用程序中的变量。

.env文件

VUE_APP_ROOT=http://localhost:8000/
VUE_APP_BASE_URL=http://localhost:8000/api/

.env.prod文件

VUE_APP_ROOT=http://realaddress/
VUE_APP_BASE_URL=http://realaddress/api/

但我不清楚如何访问这些 .env 文件？显然这在您使用时有效vue-cli，但在我的应用程序中，此日志未定义：

console.log("environment variables")
console.log(process.env.VUE_APP_ROOT)
console.log(process.env.VUE_APP_BASE_URL)

如何.env根据生产模式访问不同的文件，没有vue-cli?

我正在使用 Vue CLI 开发应用程序。此应用程序是一个 Web 界面，必须与板上的 Rest API 进行通信。

所以，因为董事会会移动，董事会的 IP 会随着时间的推移而改变，这取决于我在哪里。

这是我的项目当前树：

IP 配置包含在 Settings.js 文件中：

export const Settings = {
    // Server configuration
    SERVER_IP: '127.0.0.1',
    SERVER_PORT: '9000',

    SERVER_PROTOCOL: 'http', // http or https

    // Website configuration
    DEBUG_MODE: true
};

在我的文件中，我使用以下语句导入此 IP：

import {Settings} from '../../Settings'
const ip = Settings.SERVER_IP;

// Do stuff

这工作正常。但问题是：当 IP 改变时，我必须重新编译所有内容。因为 Settings.js 是和其他 JS 文件一起编译的。

所以，我想知道是否有办法让配置文件保留在 dist/ 目录中，并在执行期间由我的 JS 应用程序读取。因此，每次我的应用程序服务器 IP 更改时，我都不必重新编译所有内容。

泰为您提供帮助:)

我正在使用 Vue CLI webpack 模板，但很难加载我自己的图标。

我跑了 vue init webpack my-app

在index.html我已经包括：

<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">

...我确实看到了默认的 (Vue) 图标。但是，我无法确定该收藏图标位于（或以其他方式引用）的位置，也无法弄清楚将自己的收藏图标放在哪里以替换它。

我也遵循了这个答案中的建议，它建议将网站图标图像放在static文件夹中，并将其包含在index.html：

<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>

但是，正如承诺的那样，我无法访问我的网站图标。

我的猜测是在 CLI 配置文件中的某处引用了图标位置/文件，但我找不到它。

我最近一直在使用vuejs和bootstrap-vue。决定将单元测试添加到我的项目中。

我对单元测试不是很熟悉，因此我正在尝试尝试发现的一切以了解其工作原理。

Login.specs.js

import { shallowMount, mount } from '@vue/test-utils'
import Login from '@/components/auth/Login.vue'

describe('Login.vue', () => {
  it('is a Vue instance', () => {
   const wrapper = mount(Login, {
    mocks: {
     $t: () => 'Connexion' // i18N
    }
   })
  const h2 = wrapper.find('h2')
  expect(h2.text()).toBe('Connexion')
 })
})

Login.vue

<b-row align-h="center">
 <b-col class="text-center">
  <h2>{{ $t('login.connection') }}</h2>
 </b-col>
</b-row>

测试似乎一切正常。但是我发现了这些缺陷，并且可以找到一种方法来进行实际修复。

[Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

[Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

因此，我环顾四周，似乎需要将这些子组件添加到父亲中。

这是这些组件的文档。

我还添加了我的配置文件（与vue-cli 3生成的文件相同）

jest.congif.js

module.exports = {
  moduleFileExtensions: [
  'js',
  'jsx',
  'json',
  'vue'
 ],
 transform: …

我有一个需要支持 IE11 的 Vue-CLI webapp。在 package.json 中我们设置了：

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "ie 11"
  ]

这似乎适用于生成的app.x.js文件：例如，它们不包含任何...运算符。

但是，生成的chunk-vendors.x.js 确实包含...运算符，因此在 IE11 上失败。

package.json 的相关部分：

  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-template-compiler": "^2.5.21"
  },

vue.config.js 中没有相关更改，因此使用默认行为。

我需要更改什么才能确保chunk-vendors.x.js为 IE11 转译？

我有一个用 vue-cli 生成的简单项目。当我运行该vue-cli-service build命令时，它会正确生成 CSS 文件。当我运行该vue-cli-service build --watch命令时，它只会构建 JavaScript 文件。没有 CSS 文件。

如何在监视模式下生成 CSS 文件？

我在一个新项目中使用Vue CLI 3和Vuetify 2.1，最近又研究了重写Vuetify的SASS变量。最终使它工作后，我意识到每次修改variables.scss创建的文件并重新编译项目时，大约需要5分钟才能完成编译。我尝试更新package.json脚本来增加Node正在使用的内存，并且虽然修复了我收到的导致编译崩溃的错误，但现在编译时间非常慢。显示的进度（我正在使用Foreman同时运行我的Rails API和Vue服务器）如​​下所示：

17:47:29 web.1  | <s> [webpack.Progress] 69% building 916/930 modules 14 active /<path/to/app>/frontend/node_modules/css-loader/index.js??ref--9-oneOf-3-1!/<path/to/app>/frontend/node_modules/postcss-loader/src/index.js??ref--9-oneOf-3-2!/<path/to/app>/frontend/node_modules/sass-loader/lib/loader.js??ref--9-oneOf-3-3!/<path/to/app>/frontend/node_modules/vuetify/src/components/VSwitch/VSwitch.sass

如我所述，这些进度加载大约五分钟，直到它最终完成。我的猜测是，因为我更新了变量，所以必须为Vuetify node_module中的每个组件和该变量的实例更新该样式。

我的问题是是否有任何方法可以加快速度？也许我设置了导致此问题的错误信息？还是这完全正常，我只需要处理一下？

main.js

import Vue from 'vue';

import App from './App.vue';
import { router } from './router';
import store from './_store';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
}).$mount('#app');

vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    options: { …

为什么ES 导入在vue.config.js文件中不起作用？

例如：

import * as path from 'path';
import * as pjson from './package.json';

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, '/src'), // Alias @ to /src folder for ES/TS imports
      },
    },
  },
  pwa: {
    name: pjson.title,
    assetsVersion: pjson.version,
  },
};

运行npm run lint命令后出错（使用 vue-cli-service）：

\vue.config.js:1
import * as path from 'path';

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12) …

我有一个利用 Firebase Cloud Functions 的 Vue 应用程序，我已将其配置如下。

src/plugins/firebase.js

import firebase from '@firebase/app'
import '@firebase/firestore'
import '@firebase/auth'
import '@firebase/functions'

const firebaseConfig = {
  apiKey: 'my-api-key',
  authDomain: 'my-project.firebaseapp.com',
  databaseURL: 'https://my-project.firebaseio.com',
  projectId: 'my-project',
  storageBucket: 'my-project.appspot.com',
  messagingSenderId: '12345678910',
  appId: '123456789101112',
  measurementId: 'ASDFJKL'
}

firebase.initializeApp(firebaseConfig)

export default firebase

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Other imports goes here
import firebase from './plugins/firebase'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  // Other includes goes …

我的 Vue 2.2.3 应用程序无法构建，并出现 4 个与 TypeScript 相关的错误，我不确定如何修复。

控制台如下所示：

Failed to compile with 4 errors                                                          6:08:46 PM

 error  in node_modules/vue/types/jsx.d.ts:39:7

TS1110: Type expected.
    37 |    * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
    38 |    */
  > 39 |   [v: `--${string}`]: string | number | undefined
       |       ^^^^^
    40 | }
    41 |
    42 | type Booleanish = boolean | 'true' | 'false'

 error  in node_modules/vue/types/jsx.d.ts:39:20

TS1005: ';' expected.
    37 |    * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
    38 |    */
  > 39 |   [v: `--${string}`]: string | number | undefined …