use mix 2
This commit is contained in:
kuaifan
parent
3359fde4aa
commit
486b562e1d
17
package.json
17
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"
|
||||
},
|
||||
|
||||
14
resources/js/pages/project/detail.vue
Normal file
14
resources/js/pages/project/detail.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div>project-detail</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
21
resources/js/routes.js
vendored
21
resources/js/routes.js
vendored
@ -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),
|
||||
},
|
||||
]
|
||||
|
||||
121
webpack.mix.js
vendored
121
webpack.mix.js
vendored
@ -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'
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user