微调代码解析

lib/compile-vue.js

@@ -89,8 +89,8 @@ export function parseJs(
   isBuild
 ) {
   let fixedStyle = '\n\n'
-  let ASSETS_JS = '/$ASSETS_JS/'
-  let ASSETS_CSS = '/$ASSETS_CSS/'
+  let ASSETS_JS = '/@/'
+  let ASSETS_CSS = '/@/'
 
   if (isBuild) {
     ASSETS_JS = '/assets/js/'

lib/dev.js

@@ -7,6 +7,8 @@ import socket from './ws.js'
 import chokidar from 'chokidar'
 import { red, cyan, blue } from 'kolorist'
 
+import { friendlyErrors } from './utils.js'
+
 import { compileScss, parseJs, compileVue, parseHtml } from './compile-vue.js'
 
 import MIME_TYPES from './mime-tpyes.js'
@@ -143,7 +145,7 @@ export default async function createServer(root = '', conf = {}) {
 
           case 'vue':
             {
-              let rpath = pathname.replace(/\$ASSETS_JS\//, '')
+              let rpath = pathname.replace(/@\//, '')
               let file
 
               if (IS_MPA) {
@@ -157,18 +159,7 @@ export default async function createServer(root = '', conf = {}) {
                 file = join(SOURCE_DIR, rpath)
               }
               if (!fs.isfile(file)) {
-                console.log(
-                  '%s %s \n  @try to read %s',
-                  cyan(rpath),
-                  red(`not found!!!`),
-                  file
-                )
-                console.log(
-                  red(
-                    '请正确填写引入的文件路径, vue-live 不再自动补全【%s】\n'
-                  ),
-                  blue('/index.vue')
-                )
+                friendlyErrors(pathname, ext)
                 res.writeHead(404, 'Not Found')
                 res.end('')
                 return
@@ -189,12 +180,18 @@ export default async function createServer(root = '', conf = {}) {
           case 'scss':
           case 'css':
             {
-              let file = join(
-                SOURCE_DIR,
-                pathname
-                  .replace(/\$ASSETS_CSS\//, '')
-                  .replace(/\$ASSETS_JS\//, '')
-              )
+              let file = join(SOURCE_DIR, pathname.replace(/@\//, ''))
+              if (!fs.isfile(file)) {
+                file = join(PUBLIC_DIR, pathname.replace(/@\//, ''))
+
+                if (!fs.isfile(file)) {
+                  friendlyErrors(pathname, ext)
+                  res.setHeader('content-type', MIME_TYPES.html)
+                  res.writeHead(404, 'Not Found')
+                  res.end('')
+                  return
+                }
+              }
               code = compileScss(file)
               res.setHeader('content-type', MIME_TYPES.css)
             }
@@ -202,7 +199,7 @@ export default async function createServer(root = '', conf = {}) {
 
           case 'js':
             {
-              pathname = pathname.replace(/\$ASSETS_JS\//, '')
+              pathname = pathname.replace(/@\//, '')
               let file
               if (IS_MPA) {
                 if (pathname.startsWith(currentPage)) {
@@ -219,13 +216,7 @@ export default async function createServer(root = '', conf = {}) {
               } else if (fs.isfile(join(PUBLIC_DIR, pathname))) {
                 code = fs.cat(join(PUBLIC_DIR, pathname))
               } else {
-                console.log(cyan(pathname), red(`not found!!!`))
-                console.log(
-                  red(
-                    '请正确填写引入的文件路径, vue-live 不再自动补全【%s】\n'
-                  ),
-                  blue('/index.js')
-                )
+                friendlyErrors(pathname, ext)
                 res.writeHead(404, 'Not Found')
                 res.end('')
                 return
@@ -251,7 +242,7 @@ export default async function createServer(root = '', conf = {}) {
               code = null
             }
             if (code === null) {
-              console.log(cyan(pathname), red(`not found!!!`))
+              friendlyErrors(pathname, ext)
               res.writeHead(404, 'Not Found')
               res.end('')
               return

lib/utils.js

@@ -0,0 +1,9 @@
+import { red, cyan, blue } from 'kolorist'
+
+export function friendlyErrors(pathname, ext = '') {
+  console.log(cyan(pathname), red(`not found!!!`))
+  console.log(
+    red('请正确填写引入的文件路径, fite 不再自动补全【%s】\n'),
+    blue(`/index.${ext}`)
+  )
+}