fix: avoid using aliases in templates (#5656)

packages/builder/src/context/template.js

@@ -39,6 +39,8 @@ export default class TemplateContext {
           : options.loading,
       pageTransition: options.pageTransition,
       layoutTransition: options.layoutTransition,
+      rootDir: options.rootDir,
+      srcDir: options.srcDir,
       dir: options.dir,
       components: {
         ErrorPage: options.ErrorPage

packages/builder/test/context/__snapshots__/template.test.js.snap

@@ -74,6 +74,7 @@ TemplateContext {
       "pageTransition": Object {
         "name": "test_trans",
       },
+      "rootDir": "test_root_dir",
       "router": Object {
         "route": "test",
       },
@@ -90,12 +91,14 @@ TemplateContext {
     "plugins": Array [
       "plugins",
     ],
+    "rootDir": "test_root_dir",
     "router": Object {
       "route": "test",
     },
     "splitChunks": Object {
       "testSC": true,
     },
+    "srcDir": "test_src_dir",
     "store": "test_store",
     "uniqBy": [Function],
     "vue": Object {

packages/builder/test/context/template.test.js

@@ -36,6 +36,7 @@ describe('builder: buildContext', () => {
       'test-layout': 'test.template'
     },
     srcDir: 'test_src_dir',
+    rootDir: 'test_root_dir',
     loading: 'test-loading',
     pageTransition: { name: 'test_trans' },
     layoutTransition: { name: 'test_layout_trans' },

packages/vue-app/template/middleware.js

@@ -2,7 +2,7 @@ const middleware = {}
 <% middleware.forEach(m => {
    const name = m.src.replace(new RegExp(`\\.(${extensions})$`), '')
 %>
-middleware['<%= name %>'] = require('@/<%= dir.middleware %>/<%= m.src %>');
+middleware['<%= name %>'] = require('<%= relativeToBuild(srcDir, dir.middleware, m.src) %>');
 middleware['<%= name %>'] = middleware['<%= name %>'].default || middleware['<%= name %>']
 <% }) %>
 export default middleware

packages/vue-app/template/store.js

@@ -10,7 +10,7 @@ let store = {}
 void (function updateModules() {
   <% storeModules.some(s => {
     if(s.src.indexOf('index.') === 0) { %>
-  store = normalizeRoot(require('@/<%= dir.store %>/<%= s.src %>'), '<%= dir.store %>/<%= s.src %>')
+  store = normalizeRoot(require('<%= relativeToBuild(srcDir, dir.store, s.src) %>'), '<%= dir.store %>/<%= s.src %>')
   <% return true }}) %>
 
   // If store is an exported method = classic mode (deprecated)
@@ -24,14 +24,14 @@ void (function updateModules() {
 
   <% storeModules.forEach(s => {
     if(s.src.indexOf('index.') !== 0) { %>
-  resolveStoreModules(require('@/<%= dir.store %>/<%= s.src %>'), '<%= s.src %>')<% }}) %>
+  resolveStoreModules(require('<%= relativeToBuild(srcDir, dir.store, s.src) %>'), '<%= s.src %>')<% }}) %>
 
   // If the environment supports hot reloading...
   <% if (isDev) { %>
   if (process.client && module.hot) {
     // Whenever any Vuex module is updated...
     module.hot.accept([<% storeModules.forEach(s => { %>
-      '@/<%= dir.store %>/<%= s.src %>',<% }) %>
+      '<%= relativeToBuild(srcDir, dir.store, s.src) %>',<% }) %>
     ], () => {
       // Update `root.modules` with the latest definitions.
       updateModules()