fix(ui): images urls while serving the ui (dev)

vuejs · Jun 14, 2018 · 4144efc · 4144efc
1 parent 3994dac
commit 4144efc
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 10 deletions.
diff --git a/packages/@vue/cli-ui/.env.development b/packages/@vue/cli-ui/.env.development
@@ -0,0 +1 @@
+VUE_APP_CLI_UI_DEV=true
diff --git a/packages/@vue/cli-ui/package.json b/packages/@vue/cli-ui/package.json
@@ -5,7 +5,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "graphql-api": "cross-env VUE_CLI_DEBUG=true VUE_CLI_UI_DEV=true VUE_CLI_IPC=vue-cli-dev vue-cli-service graphql-api",
+    "graphql-api": "cross-env VUE_CLI_DEBUG=true VUE_APP_CLI_UI_DEV=true VUE_CLI_IPC=vue-cli-dev vue-cli-service graphql-api",
     "run-graphql-api": "vue-cli-service run-graphql-api",
     "test-graphql-api": "cross-env VUE_CLI_UI_TEST=true VUE_APP_GRAPHQL_PORT=4040 VUE_APP_CLI_UI_URL=ws://localhost:4040/graphql VUE_CLI_IPC=vue-cli-test yarn run graphql-api",
     "prepublishOnly": "yarn run lint --no-fix && yarn run build",

diff --git a/packages/@vue/cli-ui/src/components/ItemLogo.vue b/packages/@vue/cli-ui/src/components/ItemLogo.vue
@@ -16,8 +16,8 @@
       <img
         v-else-if="displayImage"
         class="image"
-        :src="image"
-        :key="image"
+        :src="imageUrl"
+        :key="imageUrl"
         @load="loaded = true"
         @error="error = true"
       >
@@ -72,6 +72,14 @@ export default {
 
     displayImage () {
       return !this.isMaterialIcon && !this.error
+    },
+
+    imageUrl () {
+      // Fix images in development
+      if (process.env.VUE_APP_CLI_UI_DEV && this.image.charAt(0) === '/') {
+        return `http://localhost:4000${this.image}`
+      }
+      return this.image
     }
   },
 

diff --git a/packages/@vue/cli-ui/src/components/ProjectNavButton.vue b/packages/@vue/cli-ui/src/components/ProjectNavButton.vue
@@ -19,7 +19,7 @@
       >
         <img
           v-if="imageIcon"
-          :src="view.icon"
+          :src="imageSrc(view.icon)"
           class="image-icon"
         >
 
@@ -72,6 +72,15 @@ export default {
     imageIcon () {
       return this.view.icon && this.view.icon.indexOf('.') !== -1
     }
+  },
+
+  methods: {
+    imageSrc (url) {
+      if (process.env.VUE_APP_CLI_UI_DEV && url.charAt(0) === '/') {
+        return `http://localhost:4000${url}`
+      }
+      return url
+    }
   }
 }
 </script>

diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/locales.js b/packages/@vue/cli-ui/src/graphql-api/connectors/locales.js
@@ -47,7 +47,7 @@ function _loadFolder (root, context) {
 
 function loadFolder (root, context) {
   const folder = path.join(root, './locales')
-  if (process.env.VUE_CLI_UI_DEV && !watchedTrees.get(root) && fs.existsSync(folder)) {
+  if (process.env.VUE_APP_CLI_UI_DEV && !watchedTrees.get(root) && fs.existsSync(folder)) {
     watchedTrees.set(root, true)
     const watch = require('watch')
     watch.watchTree(folder, () => {

diff --git a/packages/@vue/cli-ui/src/graphql-api/utils/logger.js b/packages/@vue/cli-ui/src/graphql-api/utils/logger.js
@@ -1,7 +1,7 @@
 const chalk = require('chalk')
 
 exports.log = (...args) => {
-  if (!process.env.VUE_CLI_UI_DEV) return
+  if (!process.env.VUE_APP_CLI_UI_DEV) return
   const date = new Date()
   const timestamp = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}.${date.getSeconds().toString().padStart(2, '0')}`
   const first = args.shift()
@@ -15,7 +15,7 @@ const simpleTypes = [
 ]
 
 exports.dumpObject = (obj) => {
-  if (!process.env.VUE_CLI_UI_DEV) return
+  if (!process.env.VUE_APP_CLI_UI_DEV) return
   const result = {}
   Object.keys(obj).forEach(key => {
     const value = obj[key]

diff --git a/packages/@vue/cli-ui/vue-cli-ui.js b/packages/@vue/cli-ui/vue-cli-ui.js
@@ -1,6 +1,6 @@
 // This file will be loaded when the project is opened
 module.exports = api => {
-  if (!process.env.VUE_CLI_UI_DEV) return
+  if (!process.env.VUE_APP_CLI_UI_DEV) return
 
   console.log('has(eslint)', api.hasPlugin('eslint'))
   console.log('has(typescript)', api.hasPlugin('typescript'))
@@ -16,7 +16,7 @@ module.exports = api => {
     id: 'vue-webpack-test-view',
     name: 'test-webpack-route',
     // icon: 'pets',
-    icon: 'http://localhost:4000/public/webpack-logo.png',
+    icon: '/public/webpack-logo.png',
     tooltip: 'Test view from webpack addon'
   })
 

diff --git a/packages/@vue/cli/lib/ui.js b/packages/@vue/cli/lib/ui.js
@@ -17,7 +17,7 @@ async function ui (options = {}, context = process.cwd()) {
 
   // Dev mode
   if (options.dev) {
-    process.env.VUE_CLI_UI_DEV = true
+    process.env.VUE_APP_CLI_UI_DEV = true
   }
 
   if (!process.env.VUE_CLI_IPC) {