diff --git a/package.json b/package.json
index 8beb0480..a659ae1f 100644
--- a/package.json
+++ b/package.json
@@ -2,28 +2,25 @@
"private": true,
"scripts": {
"dev": "npm run development",
- "development": "mix",
- "watch": "mix watch",
- "watch-poll": "mix watch -- --watch-options-poll=1000",
- "hot": "mix watch --hot",
+ "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+ "watch": "npm run development -- --watch",
+ "watch-poll": "npm run watch -- --watch-poll",
+ "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
- "production": "mix --production"
+ "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.21",
"cross-env": "^7.0.2",
"css-loader": "^0.28.7",
+ "internal-ip": "^6.2.0",
"jquery": "^3.5.1",
- "laravel-mix": "^6.0.6",
+ "laravel-mix": "^2.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
- "resolve-url-loader": "^3.1.3",
- "sass": "^1.34.0",
- "sass-loader": "^11.1.1",
"stylus": "^0.54.8",
"stylus-loader": "^3.0.2",
"vue": "^2.6.12",
- "vue-loader": "^15.9.7",
"vue-router": "^3.4.2",
"vue-template-compiler": "^2.6.11"
},
diff --git a/resources/js/pages/project/detail.vue b/resources/js/pages/project/detail.vue
new file mode 100644
index 00000000..7eafc06b
--- /dev/null
+++ b/resources/js/pages/project/detail.vue
@@ -0,0 +1,14 @@
+
+ project-detail
+
+
+
diff --git a/resources/js/routes.js b/resources/js/routes.js
index c95a5c23..8e106662 100755
--- a/resources/js/routes.js
+++ b/resources/js/routes.js
@@ -1,22 +1,27 @@
export default [
{
- path: '/',
name: 'index',
+ path: '/',
component: resolve => require(['./pages/index.vue'], resolve)
},
{
- path: '*',
- name: '404',
- component: resolve => require(['./pages/404.vue'], resolve),
- },
- {
- path: '/login',
name: 'login',
+ path: '/login',
component: resolve => require(['./pages/login/index.vue'], resolve),
},
{
- path: '/dashboard',
name: 'dashboard',
+ path: '/dashboard',
component: resolve => require(['./pages/dashboard/index.vue'], resolve),
},
+ {
+ name: 'project-detail',
+ path: '/project/:id',
+ component: resolve => require(['./pages/project/detail.vue'], resolve),
+ },
+ {
+ name: '404',
+ path: '*',
+ component: resolve => require(['./pages/404.vue'], resolve),
+ },
]
diff --git a/webpack.mix.js b/webpack.mix.js
index 76b16a17..38c24585 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,4 +1,5 @@
const mix = require('laravel-mix');
+const ipv4 = require('internal-ip').v4.sync();
/*
|--------------------------------------------------------------------------
@@ -6,26 +7,112 @@ const mix = require('laravel-mix');
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel applications. By default, we are compiling the CSS
+ | for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
-function getFileName(str) {
- if (/resources_js_pages_(.*?)_vue/.test(str)) {
- return /resources_js_pages_(.*?)_vue/.exec(str)[1];
- }
- return str;
-}
-mix.vue({ version: 2 })
- .copy('resources/public', 'public')
- .js('resources/js/app.js', 'public/js')
- .sass('resources/scss/app.scss','public/css')
- .webpackConfig({
- output: {
- chunkFilename: function ({chunk}) {
- return `js/build/${ getFileName(chunk.id) }.${ mix.inProduction() ? '[hash:8].' : '' }js`
+//复制资源
+mix.copy('resources/public', 'public');
+
+//生成vue页面js
+mix.js('resources/js/app.js', 'public/js');
+
+//生成css样式文件
+mix.sass('resources/scss/app.scss', 'public/css');
+
+//配置webpack
+mix.webpackConfig({
+ output: {
+ // 路由懒加载文件路径
+ chunkFilename: 'js/build/[name].js?[hash:8]',
+ },
+ devServer: {
+ disableHostCheck: true,
+ },
+ module: {
+ rules: [{
+ // 图片资源保存路径规则
+ test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/,
+ loaders: [
+ {
+ loader: 'file-loader',
+ options: {
+ name: path => {
+ path = path.replace(/\\/g, '/');
+ // 自定义部分
+ try {
+ if (/\/resources\//.test(path)) {
+ let file = path.substring(path.indexOf('/resources/') + '/resources/'.length);
+ if (file) {
+ if (file.substring(0, 3) === 'js/') file = 'pages/' + file.substring(3);
+ if (file.substring(0, 7) === 'images/') file = file.substring(7);
+ return 'images/' + file + '?[hash:8]'
+ }
+ }
+ } catch (e) { }
+ // 系统定义部分
+ if (!/node_modules|bower_components/.test(path)) {
+ return (
+ Config.fileLoaderDirs.images + '/[name].[ext]?[hash:8]'
+ );
+ }
+ return (
+ Config.fileLoaderDirs.images + '/vendor/' + path.replace(
+ /((.*(node_modules|bower_components))|images|image|img|assets)\//g,
+ ''
+ ) + '?[hash:8]'
+ );
+ },
+ publicPath: Config.resourceRoot
+ }
+ }, {
+ loader: 'img-loader',
+ options: Config.imgLoaderOptions
+ }
+ ]
+ }, {
+ // 字体资源保存路径规则
+ test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
+ loader: 'file-loader',
+ options: {
+ name: path => {
+ path = path.replace(/\\/g, '/');
+ // 自定义部分
+ try {
+ if (/\/resources\//.test(path)) {
+ let file = path.substring(path.indexOf('/resources/') + '/resources/'.length);
+ if (file) {
+ if (file.substring(0, 3) === 'js/') file = 'pages/' + file.substring(3);
+ if (file.substring(0, 7) === 'fonts/') file = file.substring(7);
+ return 'fonts/' + file + '?[hash:8]'
+ }
+ }
+ } catch (e) { }
+ // 系统定义部分
+ if (!/node_modules|bower_components/.test(path)) {
+ return Config.fileLoaderDirs.fonts + '/[name].[ext]?[hash:8]';
+ }
+ return (
+ Config.fileLoaderDirs.fonts + '/vendor/' + path.replace(
+ /((.*(node_modules|bower_components))|fonts|font|assets)\//g,
+ ''
+ ) + '?[hash:8]'
+ );
+ },
+ publicPath: Config.resourceRoot
}
- },
- });
+ }]
+ }
+}).options({
+ uglify: {
+ uglifyOptions: {
+ compress: { inline: false }
+ }
+ },
+ hmrOptions: {
+ host: ipv4 || 'localhost',
+ port: '9990'
+ },
+});